Помогите мне с этой проблемой div + css

Question

Я нарезаю psd, и есть часть экрана, которая будет повторяться с таким количеством элементов, сколько ему нужно, подобно списку вопросов stackoverflow.

Она должна иметь такую ​​структуру:

alt text http://i43.tinypic.com/k1xnxs.gif

возможно ли это? Как должен быть css?

Спасибо!

Answer 1

Проблема заключается в вашем левом div, где вы указываете, что «ширина может увеличиваться в зависимости от содержимого». Как определяется эта ширина? Диверсия справа может расширяться до 100% оставшегося пространства, но вы должны определить взаимосвязь между левым и правым divs либо путем предоставления фиксированной ширины в левом div, либо с учетом процента, равного 100%.

Answer 2

Ну, как вы, наверное, видели, so.com использовали фиксированную ширину div для достижения вашей цели макета.

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

<div style="border: 1px solid #000000; width: 60%"> 
    <div style="border: 1px solid #444444; float: left;"> 
    some text 
    </div> 
    <div style="border: 1px solid #999999; float: right;"> 
    foo 
    </div> 
</div> 

Конечно, это только поможет, если я правильно понял ваш вопрос;)

Answer 3

Вы можете попробовать следующее:

<style type="text/css"> 
    #container { 
     width:60%; 
    } 

    #content { 
     width:100%; 
    } 

    #user-content { 
     float:left; 
    } 
</style> 

<div id="container"> 
    <div id="content"> 
     <div id="user-content"> 
      <p>This can change depending on what is in here.</p> 
     </div> 
     <!-- The rest of the page's content goes here. --> 
    </div> 
</div> 

Это делает «содержание» ДИВ заполнить остальную часть пространство, которое «user-content» не заполняется. Это будет только вопрос, когда ваше содержание выше, чем содержание пользователя ... но это другая проблема :)

Это еще один Possiblity:

<style type="text/css"> 
    #container { 
     width:60%; 
    } 

    #content { 
     width:100%; 
     float:left; 
    } 

    #user-content { 
     float:left; 
    } 

    #page-content { 
     float:left; 
    } 
</style> 

<div id="container"> 
    <div id="content"> 
     <div id="user-content"> 
      <p>This can change depending on what is in here.</p> 
     </div> 
     <div id="page-content"> 
      <p>This should take up the rest of the space.</p> 
     </div> 
    </div> 
</div> 

Answer 4

Насколько я знаю, единственный путь к дайте вашему контейнеру переменной ширины и поплавьте его влево, чтобы дать ему {width: auto; float: left;}

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

Answer 5

Просто подумайте - возможно, вы сможете сделать какой-нибудь отличный JavaScript (возможно, используя jQuery?), Который меняет те divs, которые вам нужны.