明示的なサイズを定義せずに、3つのdivを1行で左中央右に揃えるにはどうすればよいですか?
左は最も左端に、右は右端に揃える必要があります。
以下は機能しません。
<div style="float: left;">
left
</div>
<div style="float: right;">
right
</div>
<div style="margin: 0 auto;">
center
</div>
ラッパーdiv
を追加して与えるtext-align:center
CSS
.wrap{
text-align:center
}
HTML
<div class="wrap">
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="center">
center sdv dg sdb sdfbh sdfhfdhh h dfh
</div>
</div>
<div style="width:100%;margin:0 auto; padding: 0">
<div style=" float:left;width:32%;border: thin solid black">
left
</div>
<div style=" float:left;width:32%;border: thin solid black">
center
</div>
<div style=" float:left;width:32%;border: thin solid black">
right
</div>
</div>
<div style="clear:both">
</div>
フロートを正しい順序で配置することにより、これを行う方法の例を次に示します。
<div class="square" style="float: left;">left</div>
<div class="square" style="float: right;">right</div>
<div class="square" style="margin:0 auto !important;">center</div>
.square {
width:50px;
height:50px;
background-color:#ff0000;
text-align:center;
border: 1px solid #000;
}
コンテンツとレイアウトパターンを知らなければ、実際にそれを行うことはできません。しかし、出発点として、これを試すことができます:
HTML:
<div class="clearfix holder">
<div class="column left">
Some Contents Here...
</div>
<div class="column middle">
Some Contents Here...
</div>
<div class="column right">
Some Contents Here...
</div>
</div>
CSS:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.holder{
text-align:center;
}
.column{
display:inline-block;
*display:inline;
*zoom:1;
width:auto;
}
.left{
background-color:#ff0;
float:left;
}
.middle{
background-color:#f0f;
margin:0 auto;
}
.right{
background-color:#0ff;
float:right;
}
これを試して
CSS
div{width:33%;}
HTML
<div style="float: left;border:1px solid red;">
left
</div>
<div style="float: right;border:1px solid green;">
right
</div>
<div style="margin: 0 auto;border:1px solid blue;">
center
</div>