CSS-стилизация - как поставить эти два блока div рядом - PullRequest
Новая
       0

CSS-стилизация - как поставить эти два блока div рядом

10 голосов
/ 22 августа 2010

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

 <div>
     <div class="post" id="fact">
    </div>

    <div class="post" id="sortbar">
    </div>

 </div>

Вот мой стиль: 

 #fact{width:200px; margin-left:auto; margin-right:auto;} #sortbar{margin-left:auto; margin-right:auto;}

Весь код находится в оболочке контейнера div со следующими свойствами: 

 #wrapper {
 float:left;
margin-top:10px;
 width:728px;
 }

Ответы [ 5 ]

16 голосов
/ 22 августа 2010

У вас есть два варианта (выберите один или другой, но не оба).

  • установить float: left; на #fact и #sortbar
  • установить display: inline-block; на #fact и #sortbar

Второй вариант лучше, потому что вам не нужно исправлять очистку и тому подобное, а также тот факт, что inline-block работает намного лучше в плане компоновки, чем оставленный плавающий.

5 голосов
/ 22 августа 2010

См. рабочий пример . Вы можете скопировать и вставить этот HTML & CSS и попробовать его. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS styling - how to put these two div boxes adjacent</title>

<style type="text/css">
.wrapper .post {
-moz-border-radius:7px 7px 7px 7px;
border:1px solid silver;
float:left;
margin:10px;
min-height:100px;
padding:5px;
width:200px;
}

</style>
</head>

<body>
<h4>CSS styling - how to put these two div boxes adjacent</h4>

<div class="wrapper">
<div class="post">
    <div>
    Browse (<a href="http://www.google.com/ncr">Google</a>)
    </div>
    <div>
    This is a Div
    </div>
    <div>
    This is a Div
    </div>
    <div>
    This is a Div
    </div>
</div>

<div class="post">
    <div>
    Browse (<a href="http://www.wikipedia.org/">Wikepedia</a>)
    </div>
    <div>
    This is another Div
    </div>
    <div>
    <div>
    This is another Div
    </div>
    <div>
    This is another Div
    </div>
</div>
</div>

</body>
</html>
0 голосов
/ 22 августа 2010

По существу, ваши div-элементы #fact и #sortbar по-прежнему имеют тип отображения «block» по умолчанию, который, проще говоря, поместит ваши div-элементы в их собственное горизонтальное пространство. Другие ответы здесь показывают, как использовать «float» для решения вашей проблемы.

Вот несколько ссылок для вас:

модель коробки: http://www.w3.org/TR/CSS2/box.html
свойство display css: http://www.w3schools.com/css/pr_class_display.asp
учебник по плаванию: http://css.maxdesign.com.au/floatutorial/

Dan

0 голосов
/ 22 августа 2010

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

#fact, #sortbar{
  float:left;
  margin-left:10px;
}

Смотри рабочую демонстрацию здесь.

0 голосов
/ 22 августа 2010

Что-то вроде этого должно сделать это ... 

#fact {
    width:200px; 
    float: left;
    margin: 0 10px 0 0;
} 
#sortbar {
    float: left;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...