Question

我成功地将我的div放在我的网页上，但我无法弄清楚如何将彼此分开的div对齐？（当仍然居中时）。这是一个博客，所以当我添加一些东西时，“blog”-div下面的div应该自动移动。（保证金因此不是解决方案）

问候

.blog {
 background: transparent;
 height: 1200;
 border-radius: 5px;
 border: solid -4px #a19a9a;
 width: 700px;
 left: 50%;
 margin-left: -350px;
 position: absolute;
 margin-top: -30px;
 padding-bottom: 50px;

}

另一个div的相同代码。

“容器”：

#content{   
width: 750px;
margin-top: 65px;
text-align: left;
height: 9000px;
overflow-x: hidden;     
}

对于所有代码：http://www.janwillemlibeer.be/verticaal

Answer 1

有很多方法可以做这样的事情..但是并非所有方法都可以在你的例子中使用..如果你提供一些代码，更容易找出哪一个。

我会使用这样的解决方案，将所有博客div组合在一个容器中。

index.html的一部分
<div class="container"> <div class="blogdiv"></div> <div class="blogdiv"></div> <div class="blogdiv"></div> <div class="blogdiv"></div> <div class="blogdiv"></div> </div>

<强> styles.css的
<div class="container"> <div class="blogdiv"></div> <div class="blogdiv"></div> <div class="blogdiv"></div> <div class="blogdiv"></div> <div class="blogdiv"></div> </div>

.container {

    width: 200px;

    margin:0 auto;

}

去这里举例---＆gt; http://jsfiddle.net/2WJm7/

但正如我所说......有很多方法可以实现这个结果但是在你向我们展示代码之前并不是所有的方法都适用于你

编辑：

好吧首先你不应该放一些疯狂的身高值...如果你把最小身高：20px;如果内容太大，它会自动调整div的大小...
如果你想中心内容只需使用margin：0 auto; 删除位置：绝对;所以它让第二个博客div进入。
在这个例子中，溢出-x也是毫无意义的。这是我改变的代码：

css

.blog {
 background: transparent;
 border-radius: 5px;
 border: 4px solid  #a19a9a;
 width: 700px;
 margin: 0 auto;
 margin-top: 30px;
 clear:both;
}

#content{   
width: 750px;
margin-top: 65px;
text-align: left;
min-height: 20px;    
}

html

.blogdiv { width: 200px; min-height: 20px; clear: both; border: 1px solid #ddd; margin: 3px; background-color: #f6f6f6; }

编辑：

您的CSS已修复

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, code, em, font, img, small, strong, ol, ul, li, fieldset, form, label, legend {
    border: 0 none;
    margin: 0;
    outline: 0 none;
    padding: 0;
}
@font-face {
    font-family: "Dincond";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/dincond-bold-webfont.eot?") format("eot"), url("fonts/dincond-bold-webfont.woff") format("woff"), url("fonts/dincond-bold-webfont.ttf") format("truetype"), url("fonts/dincond-bold-webfont.svg#webfontabKpQmB0") format("svg");
}
@font-face {
}
#content {
    float: none;
    padding-top: 65px;
    text-align: left;
    width: 750px;
    margin: 0 auto;
}
body {
    background: url("images/bkg.jpg") repeat fixed center center transparent;
    font-family: Georgia,"Lucida Sans","Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
}
#blog p {
    color: black;
    font-family: Lucida Grande;
    font-size: 13px;
    line-height: 130%;
    padding-left: 0;
}
#blog a {
    color: #1277A6;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
}
#blog a:hover {
    text-decoration: underline;
}
h2 {
    color: #1277A6;
    font-family: Dincond;
    font-size: 35px;
    font-weight: 400;
    padding: 0 0 10px;
}
h3 {
    color: #990000;
    font-family: Dincond;
    font-size: 23px;
    font-weight: 400;
}
#menu p {
    color: #4D4B4B;
    font-family: Dincond;
    font-size: 31px;
}
.blog, .contact {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 white;
    border-color: #E5E5E5 #DBDBDB #D2D2D2;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    clear: both;
    display: block;
    padding-bottom: 50px;
    width: 700px;
    margin: 0 auto;
}
#begin {
    border-bottom: 2px dashed #A19A9A;
    margin-left: 50px;
    margin-right: 50px;
    padding-bottom: 20px;
    padding-top: 10px;
    width: auto;
}

在居中的同时使Div彼此对齐

1 个答案: