发表新帖
发表新帖

CSS styling - how to put these two div boxes adjacent

前端 未结
关注
5 669
春和景丽
春和景丽 2020-12-16 01:55

I have two divs inside a div, I want them both adjacent to each other with a margin of 10px or so separating them but instead they appear one above the other.
相关标签:
5条回答
  • 没有蜡笔的小新
    2020-12-16 02:06

    You have two options (choose one or the other but not both).

    • set float: left; on both #fact and #sortbar
    • set display: inline-block; on both #fact and #sortbar

    The second option is better because you don't have to fix the clearing and such, as well as the fact that inline-block works a lot better layout-wise than left floating.

    0 讨论(0)
  • Happy的楠姐
    2020-12-16 02:25

    See this working example. You can copy and paste this HTML & CSS and try it out.

    <!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 讨论(0)
  • 悲哀的现实
    2020-12-16 02:26

    Essentially your #fact and #sortbar divs still have the default 'block' display type which, in simple terms, will put your divs in their own horizontal space. The other answers here show how to use "float" to solve your issue.

    Here's some linkage for you:

    box model: http://www.w3.org/TR/CSS2/box.html
    display css property: http://www.w3schools.com/css/pr_class_display.asp
    float tutorial: http://css.maxdesign.com.au/floatutorial/

    Dan

    0 讨论(0)
  • 被撕碎了的回忆
    2020-12-16 02:29

    Something like this should do it...

    #fact {
    width:200px; 
    float: left;
    margin: 0 10px 0 0;
} 
#sortbar {
    float: left;
}
    0 讨论(0)
  • 挽巷
    2020-12-16 02:31

    Add float:left;:

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

    See the working demo here.

    0 讨论(0)
 看不清?
提交回复
热议问题