html - 3 番目のコンテナー div 内で 2 つの div を水平方向に整列する

Question

次のコードがあります。

<div id="container">
    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
</div>

#box1 と #box2 をコンテナ内で隣り合わせにできるようにしたいです。コンテナが中央に配置されています

Answer 1

これにより、コンテナが中央に配置され、その中の 2 つの div が中央に配置され、スタイルが実際のコンテンツから分離されます。

HTML:

<div id="container">
    <div>Div 1</div>
    <div>Div 2</div>
</div>

CSS:

#container > div
{
    display: inline-block;
    border: solid 1px #000;
}
#container
{
    border: solid 1px #ff0000;
    text-align: center;
    margin: 0px auto;
    width: 40%;
}   

作業例:

http://jsfiddle.net/JLjjK/

2017年アップデート：

Flexbox はより一般的になりつつあります。Flexbox で同様の結果を得る方法を次に示します。

HTML:

<div class="outer">
  <div>1</div>
  <div>2</div>
</div>

CSS:

.outer {
  border: 1px solid #000;
  display:flex;
  justify-content: center;
  padding: 3px;
}
.outer > div {
  border: 1px solid #000;
  margin:2px;
}

例: https://jsfiddle.net/pb61a1cj/1/

Answer 2

これを試して：

HTML:

<div id="container">
    <div id="box1" class="inlined">
        <div id="box3"></div>
        <div id="box4"></div>
    </div>
    <div id="box2" class="inlined"></div>
</div>

CSS:

.inlined
{
    display: inline-block;
}

.inlined { float: left; }またはを使用することもできますが.inlined { float: right; }、周囲の要素によっては予期しない動作が発生する可能性があります。

Answer 3

これがあなたが探しているものであることを願っています...

<style type="text/css">
.container{
    margin-left: auto;
    margin-right: auto;
    width: 300px;
}
.box1, .box2 {
    width:280px;
    height:auto;
    float:left;
    margin-bottom:10px;
    padding:10px;
    border:1px solid #888;
}
.box1 {
    clear:left;
    margin-right:10px;
}
.clear {
    clear:both;
}
</style>



<div id="container">
    <div class="box1">
       Enter box 1 content here.
    </div>
    <div class="box2">
       Enter box 2 content here.
    </div>
    <div class="clear"></div>
</div>