html - CSS: div は "float:left;" ではなく "float:middle" にできますか? マージン左？

Question

をお願いします

div 1 to float on the left
div 2 to float in the center
div 3 to float on the right.

でも「真ん中に浮く」なんてことはありません

解決策？

Answer 1

これは、フレックスボックス モデルを使用するいくつかの新しいブラウザーで行うことができます。jsFiddle

HTML

<div>
    <div>left div</div>
    <div>middle div</div>
    <div>right div</div>
</div>

CSS

body {
    width: 100%;
    height: 50px;
    display: -webkit-box;
    /* iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* Firefox 19- */
    display: -ms-flexbox;
    /* IE 10 */
    display: -webkit-flex;
    /* Chrome */
    display: flex;
    /* Opera 12.1, Firefox 20+ */
    /* iOS 6-, Safari 3.1-6 */
    -webkit-box-orient: horizontal;
    -webkit-box-pack: justify;
    /* Firefox 19- */
    -moz-flex-direction: row;
    -moz-justify-content: space-between;
    /* Chrome */
    -webkit-flex-direction: row;
    -webkit-justify-content: space-between;
    /* IE10 */
    -ms-flex-direction: row;
    -ms-justify-content: space-between;
    /* Opera 12.1, Firefox 20+ */
    flex-direction: row;
    justify-content: space-between;
}
div {
    width: 25%;
    background-color: #EFEFEF;
}

さまざまなプレフィックスが付けdisplay: flex;られたプロパティは、ブラウザにdiv、フレックスボックス モデルを使用して内部のコンテンツをレイアウトする必要があることを伝えます。

さまざまな接頭辞が付いた形式のflex-direction: row;andjustify-content: space-between;は、ブラウザにwithセットdiv内に 'sを配置し、それらの間のスペースを均等に分割するように指示します。divdisplay: flex;

コメントで述べたように、新しいフレックスボックス モデルはまだすべてのブラウザーで適切にサポートされていないため、上記はクロスブラウザー フレンドリーではありません。IE8+ のサポートが必要な場合は、代わりに以下のコードを使用できます。これは、すべてのブラウザーと IE8+ で動作するはずです。jsFiddle

HTML

<div>left div</div>
<div class="middle">
    <div class="inthemiddle">middle div</div>
</div>
<div>right div</div>

CSS

html {
    display: table;
    width: 100%;
}
body {
    display: table-row;
    width: 100%;
}
div {
    display: table-cell;
    background-color: #EFEFEF;
    min-width: 200px;
}
div.middle {
    width: 100%;
    background-color: #FFF;
    text-align: center;
}
div.inthemiddle {
    text-align: left;
    display: inline-block;
    margin: 0px auto;
}

Answer 2

margin auto を使用して、div を中央に配置できます。

<div style="text-align: center;">

<div style="width: 200px; background-color: lightblue; float: left; text-align: left;">1</div>
<div style="width: 200px; background-color: lightblue; float: right; text-align: left;">3</div>
<div style="width: 200px; background-color: lightblue; margin-left: auto; margin-right: auto; text-align: left;">2</div>

</div>

Answer 3

http://jsfiddle.net/dPEwc/1/

CSS は物理法則に従っていません。「宇宙の内部では、中心は独裁者であり、左右のサイトではありません」という話で完璧主義者になろうとするのはやめましょう。しかし、HTML/CSSでそれを行う方法は次のとおりです。

HTML

<div id="wrapper">
    <div id="one">
        <div id="oneIn">
            DIV ONE
        </div>
    </div>
    <div id="two">
        <div id="twoIn">
        DIV TWO
        </div>
    </div>
    <div id="three">
        <div id="threeIn">
        DIV THREE
        </div>
    </div>
</div>

CSS

body{
    background: black;
}
#wrapper{
    width: 600px;
    margin: 0 auto;
    height: 200px;
}
#one{
    width: 200px;
    height: 200px;
    margin: 0;
    float: left;
}
#oneIn{
    width: 150px;
    height: 100%;
    background: white;
    float: left;
}
#two{
    width: 200px;
    height: 200px;
    margin: 0;
    float: left;
}
#twoIn{
    width: 150px;
    height: 100%;
    background: white;
    margin: 0 auto;
}
#three{
    width: 200px;
    height: 200px;
    margin: 0;
    float: left;
}
#threeIn{
    width: 150px;
    height: 100%;
    background: white;
    float: right;
}

Answer 4

私はこのようにしています。これは私の作成したバージョンです。うまくいけば役に立ちます。静的 html でワンオフ ボックスを実行している場合、それはクールです - 動的に動作させることは別のことです :)

<div class="boxes">
  <div class="box leftbox"></div>
  <div class="box"></div>
  <div class="box rightbox"></div>
</div>


.boxes {width:100%; text-align:center;}
.boxes .box {width:30%; height:150px; background:#f0f0f0; display:inline-block}
.leftbox {float:left;}
.rightbox {float:right;}

したがって、基本的には幅が 100% のラッパーであり、css はラッパーにすべての div を中央に配置するように指示します。display:inline ブロックはボックスを一列に並べ、float left と right は左右のボックスが中央に配置されているにもかかわらず横に浮くように指示します。皆さんにとってうまくいくことを願っています。私にとってはほとんどのブラウザーで動作します。乾杯。

Answer 5

3列のdiv 1（1st）、div 2（2nd）、div 3（3rd）があるとします。次に、div 1 を左にフロートし、幅を 200px または 20% に固定します。再び div 2 を左にフロートし、次に div 2 を div 1 の横 (左マージンから 200px 左) に配置し、最後に div 3 を右にフロートします。少し計算して、3 つの div すべてが一緒に座れるようにします。

Answer 6

非常に遅い返信ですが、サイトポイントの人たちはクールなフロートミドルを提供しました https://www.sitepoint.com/community/t/css-test-your-css-skills-number-42-float-center-revisited/ 18797

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { background:#ccc; }
.wrap {
    width:70%;
    margin:auto;
    overflow:hidden;
    border:5px solid #000;
    background:#fff;
    position:relative;
}
.col1, .col2 {
    width:48%;
    float:left;
    margin:1%;
    background:#eee;
    text-align:justify;
}
.col2 { float:right }
p {
    padding:5px;
    margin:0 0 1em;
}
.col1:before, .col2:before {
    float:right;
    width:1px;
    height:100px;
    content:" ";
}
.col2:before { float:left }
.col1 div {
    float:right;
    clear:right;
    height:154px;
    width:95px;
}
.col2 p:first-child:before {
    float:left;
    clear:left;
    height:154px;
    width:90px;
    content:" ";
}
.col1 div img {
    width:165px;
    position:absolute;
    border:10px solid #fff;
    left:50%;
    margin:0 0 0 -93px;
    top:115px;
}
</style>
</head>

<body>
<div class="wrap">
        <div class="col1">
                <div><img src="http://www.pmob.co.uk/SitePoint-quiz/tv-img2.jpg" width="165" height="124" alt="Sea"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus.  Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. </p>
        </div>
        <div class="col2">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus.  Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
                <p>Pellentesque habitantxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitantxxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. </p>
        </div>
</div>
</body>
</html>