Как отобразить два div вместе в html?

-1

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

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
    .sidebar 
    { 
     width:200px; 
     background:yellow; 
     color:orange; 
     padding:50px; 
    } 
    .content 
    { 
     width:600px; 
     background:silver; 
     color:red; 
     padding:50px; 
    } 
</style> 
</head> 
<body> 
     <div class="sidebar"> 
     This is sidebar div 
    </div> 
    <div class="content"> 
     This is Content div 
    </div> 
</body> 
</html>

источник

2016-05-31 kalathiya ankur

Возможный дубликат [CSS два дивы рядом друг с другом] (http://stackoverflow.com/questions/446060/css-two- divs-next-to-each-other) –

использовать бутстрап, сделать его простым –

Использование float:left;Learn about CSS float Property

.sidebar 
 
    { 
 
     width:150px; 
 
     background:yellow; 
 
     color:orange; 
 
     padding:50px; 
 
\t \t float:left; 
 
    } 
 
    .content 
 
    { 
 
     width:200px; 
 
     background:silver; 
 
     color:red; 
 
     padding:50px; 
 
\t \t float:left; 
 
    }

<div class="sidebar"> 
 
\t This is sidebar div 
 
</div> 
 
<div class="content"> 
 
\t This is Content div 
 
</div>

источник

2016-05-31 06:20:31

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title></title> 
 
<style type="text/css"> 
 
    .sidebar 
 
    { 
 
     width:200px; 
 
     background:yellow; 
 
     color:orange; 
 
     float:left; 
 
     padding:50px; 
 
    } 
 
    .content 
 
    { 
 
     width:200px; 
 
     background:silver; 
 
     color:red; 
 
     float:left; 
 
     padding:50px; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
     <div class="sidebar"> 
 
     This is sidebar div 
 
    </div> 
 
    <div class="content"> 
 
     This is Content div 
 
    </div> 
 
</body> 
 
</html>

источник

2016-05-31 06:21:01

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

Как:

.sidebar { 
     width: 200px; 
     background: yellow; 
     color: orange; 
     padding: 50px; 
     float:left; 
    }

источник

2016-05-31 06:22:44

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
<style type="text/css"> 
    .sidebar 
    { 
     width:200px; 
     background:yellow; 
     color:orange; 
     padding:50px; 
     float:left; 
    } 
    .content 
    { 
     width:600px; 
     background:silver; 
     color:red; 
     padding:50px; 
     float:left; 
     margin-left:10px; 
    } 
</style> 
</head> 
<body> 
    <div class="sidebar"> 
     This is sidebar div 
    </div> 
    <div class="content"> 
     This is Content div 
    </div> 
</body> 
</html>

источник

2016-05-31 06:23:40

Просто добавил главный родитель как сНу и используется дисплей: инлайн-Flex к нему.

.main{ 
 
    display:inline-flex; 
 
} 
 
.sidebar 
 
    { 
 
     width:200px; 
 
     background:yellow; 
 
     color:orange; 
 
     padding:50px; 
 
    } 
 
    .content 
 
    { 
 
     width:600px; 
 
     background:silver; 
 
     color:red; 
 
     padding:50px; 
 
    }

<div class="main"> 
 
<div class="sidebar"> 
 
     This is sidebar div 
 
    </div> 
 
    <div class="content"> 
 
     This is Content div 
 
    </div> 
 
</div>

источник

2016-05-31 06:24:27

добавления поплавка: слева как DIV будет исправить эту проблему.

код CSS:

.sidebar 
    { 
     width:200px; 
     background:yellow; 
     color:orange; 
     padding:50px; 
     float:left; 
    } 
    .content 
    { 
     width:600px; 
     background:silver; 
     color:red; 
     padding:50px; 
     float:left; 
    }

HTML код:

<div> 
     <div class="sidebar"> 
      This is sidebar div 
     </div> 
     <div class="content"> 
      This is Content div 
     </div> 
    </div>

и если один из вашего DIV идет вниз, то вы должны отрегулировать ширину вашего Div в.

источник

2016-05-31 06:27:13

Нанести поплавок: слева виджетов

источник

2016-05-31 06:27:26

Чтобы решить эту проблему:

Вы должны добавить этот код в .content и к .sidebar

float:left ... Добавить

Это должно Помощь

http://www.w3schools.com/cssref/pr_class_float.asp ..

рад помочь вам

источник

2016-05-31 06:28:30

Поскольку div является blockуровень элемента, поэтому он будет занимать ширину его непосредственного родителя 100%. Из-за этого нельзя разместить их горизонтально, не используя float - очень полезное свойство CSS.

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

.sidebar { 
    float: left; 
}

Смотреть демо here.

Чтобы получить более подробную информацию о float, всегда можно найти Google, так как это океан знаний.

источник

2016-05-31 06:45:24 Shashank

использование CSS float Property

float: none|left|right|initial|inherit;

.sidebar { 
 
    width: 200px; 
 
    background: yellow; 
 
    color: orange; 
 
    padding: 50px; 
 
    float: left; 
 
} 
 
.content { 
 
    width: 200px; 
 
    background: silver; 
 
    color: red; 
 
    padding: 50px; 
 
    float: left; 
 
}

<div class="sidebar"> 
 
    This is sidebar div 
 
</div> 
 
<div class="content"> 
 
    This is Content div 
 
</div>

источник

2016-05-31 06:53:27

Как отобразить два div вместе в html?

ответ

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