it-swarm.com.ru

Div бок о бок без поплавка

Как я могу сделать div 'left' и 'right' похожими на столбцы рядом? 

Я знаю, что могу использовать float: left на них, и это будет работать ... но на шаге 5 и 6 здесь http://www.barelyfitz.com/screencast...s/positioning/ парень говорит, что это возможно, я не могу заставить его работать, хотя ...

Код:

<style>
div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}
</style>

<div class="container">
        <div class="left">
            LEFT
        </div>
        <div class="right">
            RIGHT
        </div>
</div>
60
Praneel PIDIKITI

Обычный метод, когда не используется floats, заключается в использовании display: inline-block: http://www.jsfiddle.net/zygnz/1/

.container div {
  display: inline-block;
}

Обратите внимание на его ограничения: после первого блока есть дополнительный пробел - это потому, что два блока теперь, по сути, являются элементами inline, такими как a и em, так что пробел между двумя значениями. Это может нарушить ваш макет и/или не выглядеть красиво, и я бы предпочел не удалять все пробелы между символами ради этой работы. 

Поплавки также более гибкие, в большинстве случаев. 

98
Yi Jiang

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

display:inline-block;

Попробуйте ...


Другой способ - разместить их, используя:

position:absolute;
left:0;

и/или

position:absolute;
right:0;

Note: Чтобы это работало должным образом, элемент-обертка должен иметь position:relative;, чтобы элементы с абсолютным позиционированием оставались относительно своего элемента-обертки.

19
Zuul

Вы также можете использовать CSS3 flexbox layout, который хорошо поддерживается в настоящее время.

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    background:black;
    height:400px;
    width:450px;
}

.left {
    flex: 0 0 300px;
    background:blue;
    height:200px;
}

.right {
    flex: 0 1 100px;
    background:green;
    height:300px;
}

См. Пример (с унаследованными стилями для максимальной совместимости) & Подробнее о flexbox.

2
Oriol

В настоящее время я работаю над этим, и у меня уже есть ряд решений ... ___. Хорошо иметь сайт высокого качества, который я могу использовать и для своего удобства .. Потому что, если вы не запишите эти вещи , вы в конечном итоге забудете некоторые части .... И я также могу порекомендовать записать некоторые базовые, если вы начинаете какой-либо новый вид программирования/дизайна.

Так что, если функции с плавающей точкой вызывают проблемы, есть несколько вариантов, которые вы можете попробовать.

Один из них - это изменить выравнивание div в теге div, например, так: <div class="kosher" align=left> Если вам это не подходит, то есть другой вариант с полем, подобный этому.

.leftdiv {
    display: inline-block;
    width: 40%;
    float: left;
}
.rightdiv {
    display: block;
    margin-right: 20px;
    margin-left: 45%;
}

Не забудьте удалить <div align=left>.

2
Peter Gruppelaar

Вы можете попробовать с полем для правого div

margin: -200px 0 0 350px;
1
giker

Используйте display:table-cell; для удаления пробела между .Left и .Right

div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}

.container > div {
    display: table-cell;
}
<div class="container">
  <div>
    <div class="left">
      LEFT
    </div>
  </div>
  <div>
    <div class="right">
      RIGHT
    </div>
  </div>
</div>

0
Mehdi