Как расположить два divs бок о бок, где вторая ширина равна 100%?

Я хочу добиться этого:

width=60px         width = remaining space
|------|    |-----------------------------------|
| div1 |    | Loren ipsun...                    |
|------|    |                                   |
            |                            div2   |
            |-----------------------------------|

Пример html на jsFiddle.

Можно ли разместить два div бок о бок, оставляя второй div со всем оставшимся пространством?

Ответы

Ответ 1

Просто поплавьте первый div и установите margin-left от второго div, чтобы он соответствовал ширине первого div. Что-то вроде этого:

div.one {
  width: 60px;
  float: left;
}

div.two {
  margin-left: 60px;
}

Имейте в виду, что свойство CSS width в div применяется только к контенту, поэтому вам нужно установить margin-left как сумму width, border, margin и padding свойства первого div.

Здесь - обновленная версия вашего jsfiddle. Дайте мне знать, если у вас есть какие-либо вопросы по этому поводу.

Ответ 2

Вот как это будет сделано:

.image {
background:green;
color:green;
height:60px;
position:absolute;
width:60px;
}

.content {
background:blue;
color:white;
margin-left:60px;
   }

Ответ 3

Вот он:

CSS

#container { background: silver; width: 100% }


.image
{
    background: green; color: green;
    width: 60px; height: 60px;
    float: left;

}
.content
{
    background: blue; color: white;
   margin-left: 60px;


}

И на jsFiddle (он сейчас играет вверх)

Надеюсь, это поможет!

Ответ 4

Попробуйте следующее:

<html>

<head>
    <title>Tabla de contenidos - Template</title>
    <style type="text/css">
        div { 
            border: 1px solid #000000;
        }
        #divleft{
            width: 60px;
            float: left;
        }
        #divright{
            display: block;
            margin-left: 62px;
        }
</style> 
</head>

<body>
    <div id="divleft">This DIV has a width of 60px.</div>
    <div id="divright" >This DIV occupies the rest of the page...</div>
</body>

</html>

Поля 62px должны избегать перекрытия 1 дополнительных px каждой границы.

Ответ 5

другой вариант заключается в использовании гибкой модели

это рабочее предложение поддерживается в последних версиях firefox, chrome и safari.

его можно портировать в неподдерживаемые браузеры, используя flexie.js.

Ответ 6

появился новый способ упорядочивания элементов с CSS3 Проверьте эту страницу Flexbox Froggy, игра, в которой вы поможете Froggy и друзьям, написав код CSS!

Направьте эту лягушку на lilypad справа, используя свойство justify-content, которое выравнивает элементы по горизонтали и принимает следующие значения:

flex-start: элементы выравниваются в левой части контейнера.
flex-end. Элементы выравниваются с правой стороны контейнера.
центр: элементы выравниваются по центру контейнера.
пробел между: элементы отображаются с равным интервалом между ними.
space-around: элементы отображаются с равным интервалом вокруг них.