Вопросы Теги

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

У меня есть 2 вложенных отделения во внешнем, которое имеет width:100%. Оба вложенных отделения должны быть в одной строке и сначала должны получить ее размер от, он - содержание:

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

Вопрос состоит в том, как сделать #inner2 отделение для получения отдыха горизонтального пространства, если ширина #inner1 отделения не указана и зависит от того, что это внутри?

P.S. Все стили находятся в отдельных классах в моем случае, здесь я загнал CSS в атрибуты стиля только для упрощения.

Я хочу, чтобы результат работал в IE7 + и FF 3.6

Более подробно для меня это похоже на это:

 <style type="text/css">
.captionText
{
 float:left;
} 

.captionLine
{
 height: 1px;
 background-color:black;
 margin: 0px;
 margin-left: 5px;
 margin-top: 5px;
 border: 0px;
 padding: 0px;
 padding-top: 1px;
}
 </style>
<table style="width:300px;">
<caption width="100%">
     <div class="captionText">Some text</div>
     <div class="captionLine"> </div>
</caption>
     <tr>
           <td>something</td>
     </tr>
</table>

Вот изображение того, что я хочу: Image of what I want

48
задан Artem 15 February 2012 в 20:07
поделиться

8 ответов

Таинственный 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.

84
ответ дан 26 November 2019 в 18:48
поделиться

Вам нужно переместить div inner1 влево, например: 

<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>

Это должно помочь. Проверьте это! пока

0
ответ дан 26 November 2019 в 18:48
поделиться

Вам не нужно использовать 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>
0
ответ дан 26 November 2019 в 18:48
поделиться

Расширяя ответ @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 пикселей, чтобы увидеть, как он настраивается. (Он также работает с div, а не с промежутками - ключом является width: auto в первом div / span.)

0
ответ дан 26 November 2019 в 18:48
поделиться

Попытка это: гнездо 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

0
ответ дан 26 November 2019 в 18:48
поделиться

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

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

Пример: 

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

or

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

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

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

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

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

  1. создайте изображение того цвета, который вам нужен
  2. , сделайте его высоту такой же, как вы хотите, чтобы линия была в пикселях
  3. , поместите ее со свойством 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 */
}
0
ответ дан 26 November 2019 в 18:48
поделиться

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

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

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

Если вы хотите, чтобы два DIV отображались в одной строке, вы должны переместить первый влево. Соседний DIV появится сбоку, опять же, вам не нужно указывать ширину для второго элемента. Вот ваш полный пример, включая границу разного цвета для каждого 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>
0
ответ дан 26 November 2019 в 18:48
поделиться

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

  1. IE не поддерживает getElementsByClassName, поэтому эта функция переписана.
  2. IE по-разному обрабатывает поля, когда размер объектов изменяется и перемещается с помощью style.marginLeft, так или иначе IE, кажется, сохраняет поля в объявлении класса и добавляет это к новому style.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>
0
ответ дан 26 November 2019 в 18:48
поделиться