CSS-укладка - как поставить эти две div-боксы смежными

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

<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; 
}

Спасибо за любую помощь.

источник

2010-08-22 David Willis

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

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

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

источник

2010-08-22 09:53:32

СПАСИБО, ИНДИНАМЕРНЫЕ РАБОТЫ СОВЕРШЕННО –

Что-то, как это должно сделать это ...

#fact { 
    width:200px; 
    float: left; 
    margin: 0 10px 0 0; 
} 
#sortbar { 
    float: left; 
}

источник

2010-08-22 09:52:31 realshadow

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

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

See the working demo here.

источник

2010-08-22 09:53:18 Sarfraz

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

Вот некоторые связи для вас:

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

Dan

источник

2010-08-22 09:56:59

Смотреть это working example. Вы можете скопировать и пройти этот HTML-код & и попробовать его.

<!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>

источник

2010-08-22 10:14:51

CSS-укладка - как поставить эти две div-боксы смежными

ответ

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