Div Позиционирование не ясно

Question

у меня на странице есть следующий блок кода

<div style="width:100%; ">//div0
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; ">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; ">//div2
Image 2
</div>
</div>

что я хочу, эти два div должны объединиться, чтобы сделать большее div. так как их ширина делится на 50% каждая, они должны быть расположены ВЛЕВО И ПРАВО НА КАЖДОЕ ДРУГОЕ, но в действительности div2 расположен НИЖЕ, чем div1

Может кто-нибудь объяснить мне, что мне делать? а в чем проблема с моим простым кодом?

Answer 1

Это очень простой вопрос CSS.То, на что вы должны обратить внимание, это свойство float в CSS.Без плавающих элементов все элементы на странице будут располагаться один за другим.

<div style="width:50%; background:#f1f1f1; border:4px solid #fff; float: left;">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; float: right;">//div2
Image 2
</div>

Это должно достичь того, что вы хотите.

РЕДАКТИРОВАТЬ : на самом деле вышеупомянутое не будет 'тоже не работает.Потому что у тебя есть граница.Подумайте, вот так.Ваша страница имеет ширину 100%.Если ваша страница имеет ширину 1000 пикселей.Ваши дивы будут занимать 50% или 500px от экрана.Ваша граница займет 4 x 2 = 8 пикселей или 0,8% страницы.Всего вы добавите до 101,6% страницы.Что заставит div загружаться один за другим.

Чтобы фактически увидеть эффект плавания влево и вправо, удалите границу или уменьшите ширину:

<div style="width:45%; background:#f1f1f1; border:4px solid #fff; float: left;">//div1
Image1
</div>
<div style="width:45%; background:#f1f1f1; border:4px solid #fff; float: right;">//div2
Image 2
</div>

<div style="width:50%; background:#f1f1f1; float: left;">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; float: right;">//div2
Image 2
</div>

Также обратите внимание, что ваши зависимостина вашей ширине страницы ваш процент будет иметь разные эффекты.Граница 45% и 4px не всегда будет хорошо сочетаться.Если вы хотите, чтобы полноэкранные поля располагались влево и вправо, лучше обойтись без рамки и выполнить дополнительные стили внутри каждого элемента.