1

現在、2 つのコンテナーがあり、これらのコンテナーの 1 つを他のコンテナーの下に配置したいと考えています。これらのコンテナのそれぞれに、この投稿のおかげで 2 つのサイド バイ サイド div があります: Is it possible to put two div elements side-by-side without using CSS float?

<div id="container">
    <div class="one">testing one</div>
    <div class="two">testing two</div>
</div>
<div id="container">
    <div class="one">testing three</div>
    <div class="two">testing four</div>
</div>

http://jsfiddle.net/zWk2y/14/

one&two、three&four を隣り合わせにしたいのですが、one&two を three&four の上に重ねて、2x2 グリッドを作成します。しかし、それはお互いの上に現れ続けます。

ありがとう

4

7 に答える 7

4

ライブデモ

HTML

<div id="container1">
  div class="one">testing one</div>
  <div class="two">testing two</div>
</div>
<div id="container2">
   <div class="one">testing three</div>
   <div class="two">testing four</div>
</div>

CSS

#container1, #container2 {
    padding: 0 0 0 8%;
    width: 100%;
}
.one {
    width: 45%;
    position: relative;
    display:inline-block;
}
.two {
    width: 45%;
    position: relative;
    display:inline-block;
}

container両方の divに同じ ID を使用しています。ID は一意である必要があります。

于 2013-02-07T05:52:14.527 に答える
1

<div class="container">次の CSSを使用して適用します。

.one {
    width: 45%;
    display: inline-block;
}
.two {
    width: 45%;
    display: inline-block;
}

フィドルを参照してください。

于 2013-02-07T05:47:34.060 に答える
0

単純、

.container {
    padding: 0 0 0 8%;
}
.inner {
    float:left;
    width:45%;
}

<div  class="container">
    <div class="inner">testing one</div>
    <div class="inner">testing two</div>
</div>
<div class="container">
    <div class="inner">testing three</div>
    <div class="inner">testing four</div>
</div>
于 2013-02-07T06:01:31.270 に答える
0 
.container {
    padding: 0 0 0 8%;
    width: 100%; 
}
.one {
width:50%;
float:left;
}
.two {
width:50%;
float:left;
}
于 2013-02-07T05:56:42.473 に答える
0

まず、id を繰り返しとして使用することはできません。このように変更してください。

HTML

<div class="container">
<div class="one">testing one</div>
<div class="two">testing two</div>
</div>
<div class="containers">
<div class="one">testing three</div>
<div class="two">testing four</div>
</div>

CSS

.container {
padding: 0 0 0 8%;
width: 100%;

}

.containers{
padding: 0 0 0 8%;
width: 100%;

}


.one {
width: 45%;
position: relative;
left: 0;
}

.two {
width: 45%;
position: relative;
left: 50%;
}
于 2013-02-07T05:51:47.380 に答える
0

マークアップに関する問題はほとんどありません。以下のデモとコードを参照してください。

デモ

HTML:

<div id="container1">
    <div class="one">testing one</div>
    <div class="two">testing two</div>
</div>
<div id="container2">
    <div class="one">testing three</div>
    <div class="two">testing four</div>
</div>

CSS:

#container1 {
background-color:yellow;
}
#container2
{
    background-color:orange;
}
.one,.two
{
    display:inline-block;
    width:49%;
    border:1px solid;
    height:30px;
}
于 2013-02-07T05:54:23.157 に答える
0

フロートを使用したい場合は、この方法で実行できます。

HTML:

<div class="container">
    <div class="one">one</div>
    <div class="two">two</div>
</div>
<div class="container">
   <div class="one">three</div>
   <div class="two">four</div>
</div>

CSS:

.container {
    padding: 0 0 0 8%;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.one {
    width: 45%;
    position: relative;
    left: 0;
    float: left;
}
.two {
   width: 45%;
   position: relative;
   float:left;
}

同じ ID を持つ 2 つの要素を持つことはできません。<div id="container">に 置き換え<div class="container">

例: http://jsfiddle.net/hVgQv/

于 2013-02-07T06:04:55.593 に答える