システムを学習するための、Jeet に関する一般的な質問: Jeet Framework でネストされたブロックにブロックを均等に並べるにはどうすればよいですか?
フローティング幅をオンにして、このようなものをどのように作成できmax-width: 1450pxますか? そして、IDとクラスをできるだけ少なくするJeet哲学の範囲内ですか？私の実際のサイトでは、そこに到達するために少なくともいくつかのクラスを使用する必要がありました。
<html>
<head>
<style>
#container { width: 950px; margin:0 auto; padding:30px; }
#leftblock { float:left; width:610px; }
.fullwidthleft { clear:both; }
.fullwidthleft-inner { padding:30px; background:#999; }
.left { float:left; padding:30px; width:245px; background:#aaa; }
.right { float:right; padding:30px; width:245px; background:#bbb; }
#sidebar { float:right; width: 280px; padding:30px; background:#ccc; }
.fullwidth { clear:both; padding:30px; background:#ddd; }
</style>
</head>
<body>
<div id="container">
<div id="leftblock">
<div class="fullwidthleft">
<div class="left">
Leftside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
<div class="right">
Rightside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
<div class="fullwidthleft">
<div class="fullwidthleft-inner">
Fullwidth leftblock
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
</div>
<div id="sidebar">
Sidebar 1
<p>
lis purus auctor posuere. Praesent auctor dolor quis risus tempor sit amet fermentum turpis cursus.
</p>
<p>
Nullam sem dolor, porta nec ultricies eget, eleifend ut lacus? Nullam fermentum placerat erat vitae dapibus. Aliquam adipiscing hendrerit congue. Sed id scelerisque elit. Nunc scelerisque est sed odio accumsan in vehicula turpis tincidunt. Nulla facilisi. Nulla cursus lacinia elit, a lobortis tortor lobortis vel. Vestibulum sed lorem nunc. Curabitur a luctus ligula. In sit amet ullamcorper sapien? Vestibulum id ligula turpis, at sollicitudin justo. Sed ornare ligula malesuada erat molestie ut tempus ipsum molestie. Duis blandit tellus in quam ullamcorper sed fermentum ipsum varius. Nam sit amet eros eget dui condimentum congue eget nec est. In porttitor lacus nec risus molestie commodo. Praesent vitae justo nec odio dapibus sodales sit amet ultrices sem.
</p>
<p>
Nullam sem dolor, porta nec ultricies eget, eleifend ut lacus? Nullam fermentum placerat erat vitae dapibus. Aliquam adipiscing hendrerit congue. Sed id scelerisque elit. Nunc scelerisque est sed odio accumsan in vehicula turpis tincidunt. Nulla facilisi. Nulla cursus lacinia elit, a lobortis tortor lobortis vel. Vestibulum sed lorem nunc. Curabitur a luctus ligula. In sit amet ullamcorper sapien?
</p>
</div>
<div id="leftblock">
<div class="fullwidthleft">
<div class="left">
Leftside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
<div class="right">
Rightside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
<div class="fullwidthleft">
<div class="fullwidthleft-inner">
Fullwidth leftblock
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
</div>
<div class="fullwidth">
Fullwidth
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
</body>
</html>