Плавающие два деления прямо рядом друг с другом

Question

Плавающие два деления прямо рядом друг с другом

0

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

<div class="wrap">
<div class ="left">static data<div>
<div class ="right">variable data<div>
<div class="wrap">

css 
 .left{
   float:right;
   width:69%;
   display:block;
  }
 .right{
  float:right;
  width:28%;
  display:block;
 }
 .wrap{
 width:100%;
 }

в правом и левом divs далее есть некоторые divs в них, но без каких-либо классов. Как я могу справиться с этой проблемой. Левый div берет на себя правый div при рассылке.

Благодаря,

ssD 02 окт. 2013, в 00:23

Источник

4

Возможно, вы захотите использовать закрывающие теги.
nullability 01 окт. 2013, в 21:48
0

Если вы поместите два элемента в одну сторону, тот, который указан в источнике первым, будет самым дальним на этой стороне ... Это означает, что ваш left div будет справа от вашего right div.
Nightfirecat 01 окт. 2013, в 22:00

Теги:

html

css

3 ответа

Ещё вопросы

Возможно, вы захотите использовать закрывающие теги.
Если вы поместите два элемента в одну сторону, тот, который указан в источнике первым, будет самым дальним на этой стороне ... Это означает, что ваш left div будет справа от вашего right div.

Danield · Answer 1 · 2013-10-01T20-58-00.000Z

Я думаю, вы просто хотите поменять местами.

Первый дочерний div перемещается полностью до rhs

Второй правый плавающий div отображается слева от первого

FIDDLE

<div class="wrap">
    <div class ="right">variable data</div>
    <div class ="left">static data</div>
</div>

CSS

 .left, .right{
    float:right;
 }

eric.mcgregor · Answer 2 · 2018-01-05T15-30-00.000Z

Не сворачивая divs в HTML, плавайте обертку div вправо и делайте дочерний div-inline-block.

css 
 .wrap{
   float: right;
 }
 .left{
   width: 69%;
   display: inline-block;
  }
 .right{
  width: 28%;
  display: inline-block;
 }

Roger · Answer 3 · 2013-10-01T20-21-00.000Z

Возможно, вы захотите вызвать что-то, называемое контекстом форматирования блоков. Просто установите для свойства overflow партнера значение, отличное от значения по умолчанию. Если вам нужна обратная поддержка (например, семья), играйте с zoom: 1; Кроме того, сначала поставьте плавающие div.

.right {
    width: 28%;
    float: right;
}
.left {
    overflow: auto;
}
.wrap{
    width:100%;
}

<div class="wrap">
    <div class ="right">variable data</div>
    <div class ="left">static data</div>
</div>

http://jsfiddle.net/GMwjQ/

Там уже существует поток, который разместил этот ответ где-то в SO. Не могу найти.

Я не вижу этого overflow:auto что-нибудь делает в этом примере? Что касается поплавков, то overflow:auto (или hidden ) обычно применяется к родительскому элементу (например, .wrap в этом случае) для очистки дочерних элементов с плавающей точкой.