Div два рядом: Как расположить два блока рядом css

Leave a Comment / Разное / By /

html — div рядом с div

Вопрос задан

Изменён 4 года 3 месяца назад

Просмотрен 930 раз

Подскажите пожалуйста, есть 2 дива и их нужно расположить рядом. Сейчас блоки отображаются друг под другом.

Уже перепробовал и float:left; и white-space: nowrap;

<div >БЛОК1
	</div>
  <div>БЛОК2
    	</div>
  • html
  • css

2

У Вас нет inline-block для первого блока. По умолчанию у блока происходит перенос строк в начале и в конце содержимого, поэтому свойство inline-block нужно указывать и для первого блока тоже.

<div>БЛОК1
</div>
<div>БЛОК2
</div>

Тест

Документация

Помимо inline-block, одним из способов выравнивать блоки является flex

1

Если вы внимательно изучали CSS то там есть такая гибкая вещь как flex

https://developer.mozilla.org/ru/docs/Web/CSS/flex

.blocks-wrapper 
{
display:flex;
}

.block
{
  padding:10px;
  margin:10px;
  width:100px;
  height:100px;
  border:1px solid black;
}
<div>
  <div class = "block">
    Блок 1
  </div>
  <div class = "block">
  Блок 2
  </div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

два блока одинаковой высоты / Хабр

Задача

Заданы два блочных элемента – один с текстом статьи (ширина 75% от ширины документа), другой с перечнем ссылок для навигации по первому элементу (ширина 25%, расположен слева от первого блока).

Высота элемента содержащего статью задается динамически, в зависимости от наполнения блока текстом. Необходимо сделать так, что бы второй блок с навигацией обладал таким же значением параметра высоты как и первый содержащий основной текст статьи.

Техническое уточнение

Ранее подобные задачи решались с помощью TABLE-TR-TD семейства табличных тэгов, но такой подход нарушал принцип отделения структуры данных в разметке (markup — HTML) от способа их стилизации (styling — CSS), поскольки сами данные по характеру представленной информации вовсе не были табличными, а только использовали сходный табличному метод отображения на странице:

<table>
  <tr>
    <td id=”navigation”>
      ...перечень a-href ссылок...
    </td>
    <td id=”content”>
      ..содержимое статьи...
    </td>
  </tr>
</table>

Позже стандарт СSS был расширен дополнительными значениями table, table-cell для параметра display, что позволило использовать привычные DIV, SPAN элементы в html-структуре разметки страницы и задавать для них соответствующие css-правила для отображения в виде таблицы с колонками сообщающимися в процентном соотношении как по ширине так и по высоте:

<div id=”wrapper”>
  <div id=”navigation”>
    . ..перечень a-href ссылок...
  </div>
  <div id=”content”>
    ...содержимое статьи...
  </div>
</div>

#wrapper {
display: table;
}
#navigation, #content {
display: table-cell
}

Казалось бы задача была решена, но к сожалению, такой подход не работал в старших версиях браузеров (IE 6, IE 7) заставляя верстальщиков искать другие подходы. Довольно распространенным стало решение с помощью вложенных элементов-оберток смещение которых относительно друг-друга позволяет добиться визуального эффекта равных по высоте колонок:

<div>    
  <div>    
    <div>    
      ...перечень a-href ссылок...    
    </div>        
   <div>    
      ...содержание...    
    </div>    
  </div>    
</div> 

#navigation, #content {                                                          
  position: relative;                                                            
  float: left;                                                                   
  left: -50%;                                                                    
}                                                                                
                                                                             
#navigation {                                                                    
  width: 50%;                                                                    
}                                                                                
                                                                                 
#bg-one, #bg-two {                                                                
  position:relative;                                                             
  float: left;                                                                   
  width: 100%;                                                                   
  background-color: #9988ff;                                                     
}                                                                                
                                                                   
#bg-one {                                                                        
  overflow: hidden;                                                               
}                                                                                
                                                                                 
#bg-two {                                                                        
  left: 50%;                                                                     
  background-color: #99ff99;                                                     
}

Роль колонок здесь выполняют обертывающие тэги (#bg-one, #bg-two) количество которых дублирует вложенные в них тэги с контентом (#content, #navigation). Такая техника работает даже в IE 6, но ее ощутимым недостатком является необходимость добавления большого количества дополнительных элементов (#bg-one, #bg-two) обертывающих тэги с текстом колонок (#content, #navigation). Количество таких элементов оберток (#bg-N) равно количеству фактических блочных-тэгов с колоноками текста. В приведенном выше примере для добавления еще одной колонки (скажем #advertisement) на одном уровне с #navigation и #content придется добавить еще один общий обертывающий элемент bg-three:

<div>                                                                
  <div>                                                                
    <div>                                                                                                                                               
      <div>                                                            
        ..перечень ссылок a href...                                                                           
      </div>                                                                                                                                                            
      <div>                                                               
        .
 
 .содержание статьи....                                                           
      </div>                                                                                                                                                            
      <div>                                                         
        ...рекламные объявления...                                                                        
      </div>                                                                                                                                                            
    </div>                                                                           
  </div>                                                                           
</div> 

#navigation, #content, #advertisement {                                          
  position: relative;                                                            
  float: left;                                                                   
  left: -64%;                                                                    
}                                                                                
                                                                                 
#navigation,#content {                                                           
  width: 32%;                                                                    
}                                                                                
                                                                                 
#bg-one, #bg-two, #bg-three {                                                    
  position: relative;                                                            
  float: left;                                                                   
  width: 100%;                                                                   
  background-color: #9988ff;                                                     
}                                                                                
                                                                                 
#bg-one {                                                                        
  overflow: hidden;                                                              
}                                                                                
                                                                                 
#bg-two {                                                                        
  left: 32%;                                                                     
  background-color: #99ff99;                                                     
}                                                                                
                                                                                 
#bg-three {                                                                      
  left: 32%;                                                                     
  background-color: #a0a0a0;                                                     
}

В таком случае html-разметка заметно усложняется – причина наличия обертывающих тэгов неочевидна. Таким образом отказываясь от html-таблиц из-за плохой читабельности разметки мы приходим к еще менее читабельному коду. Ситуацию можно улучшить если перенести обертывающие тэги на один уровень с колонками:

<div>                                                                                                                                                
  <div></div>                                                   
    <div>                                                            
      ..перечень ссылок с a href..                                                                           
    </div>                                                                                                                                                            
  <div></div>                                                      
  <div>                                                               
    ...содержание статьи...                                                                          
  </div>                                                                                                                                                            
</div>                                                                           
 
#wrapper{                                                                        
  position: relative;                                                            
  float: left;                                                                   
  width: 100%;                                                                   
}                                                                                
#navigation, #content {                                                          
  position: relative;                                                            
  float: left;                                                                   
  width: 50%;                                                                    
}                                                                                
#navigation-bg {                                                                 
  position: absolute;                                                            
  left: 0;                                                                       
  width: 50%;                                                                    
  height: 100%;                                                                  
  background-color: #ffaaaa;                                                     
}                                                                                
#content-bg {                                                                    
  position: absolute;                                                            
  left: 50%;                                                                     
  width: 50%;                                                                    
  height: 100%;                                                                  
  background-color: #aaffaa;                                                     
}

В таком случае элементы c фоном (#navigation-bg, #content-bg) расположены перед тэгами содержащими текст колонок, что заметно улучшает понимание разметки. Но к сожалению IE 6 не понимает процентных значений заданных в параметре высоты для блочных элементов с абсолютным позиционированием, а для более свежие версии браузеров поддерживают display: table правило, которое позволяет избежать добавочных div-элементов содержащих фон колонок (в примере выше #content-bg, #navigation-bg).

Решение

Читая задание становится заметным что разметка текста с прицелом на последующие применение css-правила display: table, также содержит один лишний тэг:

<div id=”wrapper”>
  <nav class=”shakespeare”>
    ...перечень ссылок...
  </nav>
  <article class=”shakespeare”>
    ...содержание статьи...
  </article>
</div>

#wrapper {                                                                       
  display: table;                                                                
}                                                                                
. shakespeare {                                                                   
  display: table-cell;                                                           
  background-color: #f0f0f0;                                                     
}

Ведь в таком варианте зависимость высоты колонок двунаправлена, то есть высота блока заданного тэгом nav зависит от высоты блока заданного тэгом article и наоборот — блок article зависит от высоты блока nav. Хотя в данном случае только высота блока nav должна подстраиваться под высоту более длинного тэга article обратная зависимость является лишней:

<article>
  <aside>
    ...перечень ссылок...
  </aside>
  ..содержание статьи
</article>

article {                                                                        
  position: relative;                                                            
  display: block;
  width: 75%;                                                                    
  left: 25%;                                                                     
  background-color: #8888FF;                                                     
}                                                                                
                                                                                 
aside {                                                                          
  position: absolute;                                                            
  display: block;
  width: 33%;                                                                    
  left: -33%;                                                                    
  height: 100%;                                                                  
  background-color: #F88888;                                                     
}

Процентное значения для аболютных элементов также как и display: table работают в браузере IE начиная только с восьмой версии. Значения ширины и длины блока aside берутся из пересчета относительно размеров блока article, так как в CSS координаты и размеры элемента с абсолютным отсчитывается начиная с первого родительского элемента с нестатичным (relative, absolute, fixed) значеним параметра position. То есть ширина блока article (которая составляет 75% от ширины документа) для aside контейнера равна 100%, составляя пропорцию:

75% - 100%
25% - ?

получаем

25% * 100% / 75% = 33.33%

То есть 25% свободного экрана в процентном соотношении блока article.
Таким образом мы можем избавиться от лишнего wrapper элемента, отобразить зависимость одной колонки от другой в коде и не прибегать к методу табличного позиционирования для нетабличных данных.

css — Как расположить эти два div рядом?

спросил

Изменено 3 года, 10 месяцев назад

Просмотрено 388 тысяч раз

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

 <дел>
  <дел>
  <дел>
<дел> <дел> <дел>
<дел> <дел> <дел>

Я хочу получить каждую пару child_div_1 и child_div_2 рядом друг с другом. Как я могу это сделать?

  • CSS
  • макет
  • HTML

0

Так как элементы div по умолчанию состоят из блоков и элементов, то есть они будут занимать всю доступную ширину, попробуйте использовать —

 display:inline-block;

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

Я нахожу эту технику проще, чем бороться с float s.

Дополнительные сведения см. в этом руководстве — http://learnlayout. com/inline-block.html. Я бы порекомендовал даже предыдущие статьи, которые ведут к этой. (Нет, я этого не писал)

5

 #parent_div_1, #parent_div_2, #parent_div_3 {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  граница: 1px сплошной красный;
  поле справа: 10px;
  плыть налево;
}
.child_div_1 {
  плыть налево;
  поле справа: 5px;
}

Проверьте рабочий пример на http://jsfiddle.net/c6242/1/

4

Я нашел приведенный ниже код очень полезным, он может помочь любому, кто ищет здесь

 
<тело>
    <дел>-
    <дел>-
    <дел>-

0

Использовать flexbox очень просто!

 #parent_div_1, #parent_div_2, #parent_div_3 {
    дисплей: гибкий;
}

Пример скрипки

Использование стиля

 . child_div_1 {
    плыть налево
}

Лучшее, что мне подходит:

 .слева{
   ширина: 140 пикселей;
   плыть налево;
   высота:100%;
 }
 .верно{
   поле слева: 140px;
 }


http://jsfiddle.net/jiantongc/7uVNN/

Использование flexbox

 #parent_div_1{
     дисплей: гибкий;
     flex-wrap: обернуть;
  }

Пользователь float:left свойство в дочернем классе div

подробно проверить структуру div: http://www.dzone.com/links/r/div_table.html

html — Как поставить два div рядом сторона

спросил

Изменено 1 год, 6 месяцев назад

Просмотрено 323 тыс. раз

Итак, я новичок в написании кода (около нескольких недель), и я столкнулся с проблемой, когда писал код для своего веб-сайта. Я хочу иметь такой макет:

Но я не могу понять, как поставить две коробки рядом. В одном поле будет видео, объясняющее мой веб-сайт, а в другом поле будет регистрационная форма. Я хочу, чтобы коробки были рядом друг с другом, с расстоянием между ними около дюйма.

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

Я хочу, чтобы весь веб-сайт был похож на одну большую коробку, и весь контент находился внутри этой коробки. Кто-нибудь может мне помочь? Очень признателен. Заранее спасибо.

  • HTML
  • CSS

1

http://jsfiddle.net/kkobold/qMQL5/

 #заголовок {
    ширина: 100%;
    цвет фона: красный;
    высота: 30 пикселей;
}

#контейнер {
    ширина: 300 пикселей;
    цвет фона: #ffcc33;
    маржа: авто;
}
#первый {
    ширина: 100 пикселей;
    плыть налево;
    высота: 300 пикселей;
        цвет фона: синий;
}
#второй {
    ширина: 200 пикселей;
    плыть налево;
    высота: 300 пикселей;
    цвет фона: зеленый;
}
#прозрачный {
    ясно: оба;
} 
 <дел>
<дел>
    <дел>
    <дел>
    <дел>