XHTML/CSS: Как сделать внутренний div получить 100% ширину минус другая ширина div

Ответ 1

Таинственный overflow: hidden; - ваш друг здесь. Он останавливает элементы, расположенные рядом с поплавками, простирающимися за поплавок - я думаю, что это макет, который вы ищете.

Вот несколько слегка отредактированных HTML: я не думаю, что у вас могут быть # символы в id s:

<div id="outer">
    <div id="inner1">
        inner div 1. Some text...
    </div>
    <div id="inner2">
        inner div 2...
    </div>
</div>

И она использует CSS для достижения желаемого макета.

(Я добавил дополнительный CSS для IE 6 с HTML условные комментарии. Я просто заметил, что вам действительно не нужно было работать в IE 6 тоже, но если вы хотите быть приятным для пользователей IE 6 там...)

<style type="text/css">
#outer {
    overflow: hidden;/* Makes #outer contain its floated children */
    width: 100%;

    /* Colours and borders for illustration purposes */
    border: solid 3px #666;
    background: #ddd;
}

#inner1 {
    float: left;/* Make this div as wide as its contents */

    /* Colours and borders for illustration purposes */
    border: solid 3px #c00;
    background: #fdd;
}

#inner2 {
    overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */

    /* Colours and borders for illustration purposes */
    border: solid 3px #00c;
    background: #ddf;
}
</style>

<!--[if lte IE 6]>
<style type="text/css">
#inner2 {
    zoom: 1;/* Make this div take up the rest of the horizontal space, and no more, in IE 6 */
}

#inner1 {
    margin-right: -3px;/* Fix the 3-pixel gap that the previous rule introduces. (Shit like this is why web developers hate IE 6.) */
}
</style>
<![endif]-->

Протестировано и работает в IE 6, 7 и 8; Firefox 3.5; и Chrome 4.

Ответ 2

Если вы читаете это сейчас, вы, вероятно, можете использовать calc, поэтому будьте благодарны.

HTML

<div class="universe">
  <div class="somewidth">
  </div>
  <div class="everythingelse">
  </div>
</div>

CSS

.universe {
  width: 100%;
  height: 100%;
}

.somewidth {
  width: 200px;
  height: 100%;
}

.everythingelse {
  width: 800px; /* fallback for emergencies */
  width: calc(100% - 200px);
  width: -moz-calc(100% - 200px);
  width: -webkit-calc(100% - 200px);
  height: 100%;
}

См. рабочий стол в JSFiddle.

Ответ 3

Вам нужно будет поместить внутренний 1 div влево, например:

<div id="#outer" ....>
    <div id='#inner1" style="float:left; border: 1px solid #000;">
        blabla
    </div>
    <div id="#inner2" style="... DON'T USE WIDTH AND DISPLAY HERE! ...">
        gnihihi
    </div>
</div>

Это должно сделать трюк. Проверьте это! свидания

Ответ 4

Вам не нужно использовать div для вложенного элемента, просто используйте SPAN, как этот

 <div>
     <span style="display:inline-block;width: auto;border: solid 1px black;">
            hey you
     </span>
     <span style="display:inline-block;marging: 0px 2px;border: solid 1px black;">
           always use proper tools.
     </span>
 </div>

Ответ 5

Расширяясь в ответ на @Nasser Hajloo, это работает для меня (даже в IE6)

 <div style="width: 400px; border: solid 1px red;"> 
     <span style="float:left;width: auto;border: solid 1px black;"> 
            hey you 
     </span> 
     <div style="display:inline-block;margin: 0px 2px;border: solid 1px black;">always use proper tools.</div> 
 </div> 

Попробуйте с основным div размером менее 400 пикселей, чтобы увидеть, как он настраивается. (Он также работает с divs, а не с пробелами - ключ - это ширина: auto в первом div/span.)

Ответ 6

Попробуйте это: гнездо inner1 внутри inner2 и удалите display:inline из inner2, например:

<div id="#outer" style="width:100%; border:1px solid red">
  <div id="#inner2" style="width:100%; border:1px solid black;">
     <div id="#inner1" style="border:1px solid blue; display:inline">
      inner div 1. Some text...
     </div>
  inner div 2...
  </div>
</div>

Вы можете увидеть, как он работает здесь: http://jsbin.com/adiwi

Ответ 7

Из вашего кода похоже, что вы пытаетесь получить горизонтальную линию, чтобы заполнить пустое место в вашем div. Если я прав, вы хотите создать визуальный эффект с разметкой. Исправьте меня, если я ошибаюсь.

(Было бы неплохо увидеть изображение того, что вы хотите)

Пример:

Title ---------------------------

or

Title: Caption ------------------

Это не лучшая практика. Вы должны попытаться получить этот эффект с помощью CSS.

Попробуйте сделать ваш код более семантическим:

<div id="#outer" style="width:100%; border:1px">
  <h3 style="border:1px; display:inline">
    Caption
  </h3>
</div>

Чтобы получить строку:

• создать изображение с цветом, который вы хотите
• сделать высоту такой же, как вы хотите, чтобы строка была в px
• расположите его с помощью background Свойство

.

#outer h3 {
display: inline;
background-color: #000;
color: #FFF;
}

#outer {
width: 100%; /* is the default of block element but just for celerity */
background: #000 url('image path') center left; /* position the image */
}

Ответ 8

Ваша первая проблема заключается в том, что вы префикс своих идентификаторов с помощью '#'. # Используется только в CSS для ссылки на элемент с этим идентификатором, например. правило CSS #outer {width: 100%} относится к вашему элементу:

<div id="outer"></div>

Также вам не нужно использовать ширину для div (или любых других элементов блока), которые не плавают, поскольку они уже автоматически занимают 100% доступной ширины.

Если вы хотите, чтобы 2 DIVs появлялись на одной строке, вы должны поместить первый слева. Затем соседний DIV появится сбоку, снова вам не нужно указывать widthd для второго элемента. Вот ваш полный пример, включающий разную цветную рамку для каждого div.

Я сделал границы большими, чтобы вы могли видеть, что происходит дальше.

<html><body>
<style type="text/css">
#outer {
    border: solid 5px #c00;
}
#inner1 {
    border: solid 5px #0c0;
    float: left;
    width: 200px;
    height: 300px;
}
#inner2 {
    border: solid 5px #00c;
    height: 300px;
    margin-left: 210px; /* 200px left width + 2 x 5px borders */
}
</style>

<div id="outer">
  <div id="inner1">
    inner div 1. Some text...
  </div>
  <div id="inner2">
    inner div 2...
  </div>
</div>

</body></html>

Ответ 9

Другим решением является запуск javascript, который изменяет размер класса captionLine, когда этот документ загружен.
Потребовалось некоторое время, чтобы заставить его работать под IE8, не пробовал IE7, но должен работать.
2 примечания.

• IE не поддерживает getElementsByClassName, поэтому эта функция переписывается.
• IE обрабатывает поля по-разному, когда объекты изменяются и перемещаются с помощью style.marginLeft, поэтому IE, похоже, сохраняет маржу в объявлении класса и добавляет ее в новый стиль .margin.

<body onload="resizeCaptionLine()">
<style>
caption {
 border: 1px solid blue;
 padding: 0px;
}
.captionText {
 border: 1px solid red;
 float: left;
}
.captionLine {
 background-color:black;
 margin: 0px;
 margin: 5px 0px 0px 5px;
 border: 0px;
 padding: 0px;
 padding-top: 1px;
}
</style>

<table style="width:300px;">
<caption width="100%" name="caption1">
     <div class="captionText">Some text</div>
     <div class="captionLine"> </div>
</caption>
     <tr>
           <td>something</td>
     </tr>
</table>
<table style="width:300px;">
<caption width="100%" name="caption2">
     <div class="captionText">Some text</div>
     <div class="captionLine"> </div>
</caption>
     <tr>
           <td>something</td>
     </tr>
</table>

<script type="text/javascript">

function getElementsByClassName(node, class_name) {
  elems = node.all || node.getElementsByTagName('*');
  var arr = new Array();
  for(j = 0; j < elems.length; j++)
  {
    if (elems[j].className == class_name)
       arr[arr.length] = elems[j];
  }
  return arr;
}

function resizeCaptionLine()
{
 var elems = getElementsByClassName(document, 'captionLine');
 for(i = 0; i < elems.length ; i++)
 {
   var parent = elems[i].parentNode;
   var sibling = getElementsByClassName(parent, 'captionText');
   var width = parent.offsetWidth - sibling[0].offsetWidth;

    if(elems[i].currentStyle)
   {
     var currentMargin = elems[i].currentStyle.marginLeft;
     var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
     elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px";
   }
   else if (document.defaultView && document.defaultView.getComputedStyle)
   {
     var currentStyle = document.defaultView.getComputedStyle(elems[i], '');
     var currentMargin = currentStyle.marginLeft;
     var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
     elems[i].style.marginLeft = (sibling[0].offsetWidth + margin) + "px";
   }
   else
   {
     var currentMargin = elems[i].style.marginLeft;
     var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
     elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px";
   }
   elems[i].style.width = (width - margin)+"px";
 } 
}
</script>
</body>

Ответ 10

Ответ действительно прост! Если у вас есть фиксированный div (меню) на левой стороне, то дайте фиксированный div float: left и ваш правый гибкий div margin-left, который больше ширины первого фиксированного дела.