Выравнивание Div друг под другом во время центрирования

Question

Мне удалось центрировать мои div на моей веб-странице, но я не могу понять, как расположить отдельные div друг под другом? Это блог, поэтому, когда я что-то добавляю, div под "blog" -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
<code><div class="container"><br> <div class="blogdiv"><!-- content of blog here --></div><br> <div class="blogdiv"><!-- content of blog here --></div><br> <div class="blogdiv"><!-- content of blog here --></div><br> <div class="blogdiv"><!-- content of blog here --></div><br> <div class="blogdiv"><!-- content of blog here --></div><br> </div>

styles.css
.container {<br> width: 200px;<br> margin:0 auto;<br> } </p> <p>.blogdiv {<br> width: 200px;<br> min-height: 20px;<br> clear: both;<br> border: 1px solid #ddd;<br> margin: 3px;<br> background-color: #f6f6f6;<br> }

иди сюда для примера ---> http://jsfiddle.net/2WJm7/

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

РЕДАКТИРОВАТЬ:

ОК, так что в первую очередь вы не должны ставить некоторые сумасшедшие значения высоты ... если вы установите минимальную высоту:20px;он будет автоматически изменять размер вашего div, если содержимое слишком велико ...
, если вы хотите центрировать содержимое, просто используйте margin: 0 auto;удалить позицию: абсолют;так что он позволяет второму блогу div подойти.
Overflow-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

<code><div class="content"><br> <div class="blog">asudhasbdjsabdaushdusab saudhsab dsuadh sauhd iusahd bsabd sadjsa ub d</div><br> <div class="blog">sadsad sasdas frw</div><br> <div class="blog">suadguiasgduiasb gasyudh shavduis auydb iuasbvd unqwhbv ub ihbiusbvduib bni busib ub iubyu buih bviun buyvb ou vuqiw</div><br> <div class="blog">yauhdiuasbduasndbasubdas</div><br> <div class="blog">test</div><br> </div>

edit:

Ваш 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;
}