私の問題を説明するために、ここに簡単なデモがあります。
http://www.ttmt.org.uk/forum/index.html
これは、3 つの列を作成するためにフローティングされる div のレスポンシブ レイアウトです。
div の高さは異なるため、高さの高い div の後に div が来ると、次の列に押し下げられます。ヘッダー 3 とヘッダー 4。
高さの異なる div を組み合わせることができますか?
目的のレイアウトを説明するために、ここに画像があります。div の順序は、それらが適合する限り重要ではありません。
http://www.ttmt.org.uk/forum/1.png
アリの助けを前もってありがとう。
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Title of the document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font:10px 'Source Sans Pro', sans-serif;
font-size:100%;
font-size:1.02em;
color:#555;
}
#pageWrap{
max-width:1135px;
margin:0 auto;
border-left:40px solid white;
border-right:40px solid white;
}
/*---------------------
sec-sevice
----------------------*/
#sec-service{
padding:0 0 230px 3.52422907488987%;
margin:30px 0 0 0;
}
#sec-service .service{
float:left;
width:29.68036529680365%;
background:#ccc;
margin:0 3.65296803652968% 6px 0;
}
.service h3{
font-weight:700;
font-size:1.1em;
padding:10px 0;
}
.service p{
padding:0 0 10px 0;
margin:0 0 10px 0;
}
/*---------------------
Media queries
----------------------*/
@media only screen and (max-width:880px){
#sec-intro p,
#sec-service .service{
width:100%;
float:none;
}
}
</style>
</head>
<body>
<div id="pageWrap">
<section id="sec-service" class="group">
<div id="serviceText" class="group">
<div class="service">
<h3>Heading 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="service">
<h3>Heading 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
</p>
</div>
<div class="service">
<h3>Heading 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
</p>
</div>
<div class="service">
<h3>Heading 4</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="service">
<h3>Heading 5</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="service">
<h3>Heading 6</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="service">
<h3>Heading 7</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
</p>
</div>
</div>
</section>
</div><!-- #pageWrap -->
</body>
</html>