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

Question

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

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

альтернативный текст http://i43.tinypic.com/k1xnxs.gif

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

Спасибо!

Answer 1

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

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

Это заставляет div "content" заполнять оставшееся пространство, которое не заполняет "user-content". Это будет проблемой, только если ваш контент выше пользовательского контента ... но это другая проблема:)

Это еще одна возможность:

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

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

Answer 3

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

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

Answer 4

Ну, как вы, наверное, уже видели, 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 5

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