Div плавающий левый, другой встроенный вправо

У меня такое ощущение, что это самый фундаментальный вопрос, и после 5 лет беспорядочного общения с CSS я должен знать ответ на него.Div плавающий левый, другой встроенный вправо

У меня есть два div с классами pane-node-field-imageown и pane-node-field-short-place-intro. Они находятся в верхней части моей страницы, которая завернута в div с классом burr-flipped-content-inner.

HTML

<div class="burr-flipped-content-inner burr-flipped-content-region-inner panel-panel-inner"> 
    <div class="panel-pane pane-entity-field pane-node-field-imageown"> 
     <div class="panel-separator"></div> 
     <div class="panel-pane pane-entity-field pane-node-field-short-place-intro"> 
      <div class="panel-separator"></div> 
      <div class="panel-pane pane-vtiews-panes pane-og-nodes-panel-pane-2"> 
      </div>

С DIV, который имеет pane-node-field-imageown класс, я хотел бы, чтобы плавать влево.

CSS

.pane-node-field-imageown 
{ 
    float:left; 
    display: inline-block; 
}

Я добавил значение inline-block, как это кажется самый лучший костюм. Проблема заключается в том, чтобы div pane-node-field-short-place-intro сидеть красиво справа от первого блока. Кажется, он хочет спрятаться за ним (хотя мой текст, похоже, сидит нормально). Единственный способ, которым я могу получить желаемое поведение, - это этот CSS ко второму блоку:

.pane-node-field-short-place-intro { 
    display: table; 
    padding: 0 10px; 
} 

.pane-node-field-short-place-intro .pane-content { 
    background: none repeat scroll 0 0 #444444; 
    padding:10px; 
}

Это не так. Моя страница может быть viewed here for reference.

источник

2013-05-07 Reg Gordon

Вы можете просто сделать это:

.pane-node-field-short-place-intro { 
padding: 3px 5px 0 20px; 
overflow: hidden; 
}

источник

2013-05-07 03:41:15

благодарит Ральфа, что именно то, что я был после. когда я получу шанс, у меня будет небольшое чтение при переполнении. –

Рад помочь. 'overflow: hidden 'очень удобен для многих вещей. В этом случае он останавливает неплавающий элемент от обтекания плавающего элемента рядом с ним, поэтому это хороший способ делать столбцы. –

jsFiddle - CSS поплавков
http://jsfiddle.net/kn9RE/9/

CSS Нормализация - обязательно сделать FIRST ссылки стилей
http://necolas.github.io/normalize.css/

Во-первых, вы переоцениваете свою внешнюю разметку. Я говорю это, потому что ваша текущая разметка напоминает «Div Spaghetti». Я бы начал с оценки вашего html-кода в целом, удалил все CSS и убедился в структуре вашей страницы. Хотя есть простые способы решения этой проблемы, всегда лучше проанализировать свой код и спросить себя: «Это можно сделать с меньшей разметкой?». Не прыгайте, чтобы сделать легкий выход, вы часто окажетесь в кодовой базе, полной плохих привычек.

Если вы должны использовать свой существующий HTML-код, вы можете применить бандажную помощь к своей проблеме;

.pane-node-field-imageown 
{ 
float:left; 
} 

.pane-node-field-short-place-intro 
{ 
max-width: 660px; 
float:left; 
padding: 10px 5px 0 15px; 
} 

.field-item even 
{ 

}

Это должно начаться, если у вас есть какие-либо вопросы. Пожалуйста, не стесняйтесь сообщать мне.

источник

2013-05-07 05:11:00 Ryan

Div плавающий левый, другой встроенный вправо

ответ

Смежные вопросы