2つのグリッドビューを互いに近くに配置するにはどうすればよいですか？

私は最初からウェブサイトを作っています。私はw3schoolのグリッドビューを見て、それを使うことを考えました。とにかく、私は.whole要素に残っているfloatを使用しましたが、動作しません。私はすでに左にクリアするためにそれを変更しようとしましたが、それも動作していません。誰かが2つの.sections要素を隣り合わせに配置するのを助けることができますか？2つのグリッドビューを互いに近くに配置するにはどうすればよいですか？

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 

 
[class*="col-"] { 
 
    float: left; 
 
    padding: 15px; 
 
} 
 

 
body { 
 
    font-family: "Lucida Sans", sans-serif; 
 
} 
 

 
.header { 
 
    width: 500px; 
 
    background-color: #9933cc; 
 
    color: #ffffff; 
 
    padding: 15px; 
 
} 
 

 
.menu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.menu li { 
 
    padding: 8px; 
 
    margin-bottom: 7px; 
 
    background-color: #33b5e5; 
 
    color: #ffffff; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
 
} 
 

 
.menu li:hover { 
 
    background-color: #0099cc; 
 
} 
 

 
@media only screen and (min-width: 600px) { 
 
    /* For desktop: */ 
 
    .col-3 { 
 
    width: 15%; 
 
    } 
 
    .col-6 { 
 
    width: 20%; 
 
    } 
 
} 
 

 
.sections { 
 
    width: 1300px; 
 
} 
 

 
.whole { 
 
    float: left; 
 
}

<div class="whole"> 
 
    <div class="sections"> 
 
    <div class="header"> 
 
     <h1>Chania</h1> 
 
    </div> 
 

 
    <div class="row"> 
 

 
     <div class="col-3 menu"> 
 
     <ul> 
 
      <li>The Flight</li> 
 
      <li>The City</li> 
 
      <li>The Island</li> 
 
      <li>The Food</li> 
 
     </ul> 
 
     </div> 
 

 
     <div class="col-6"> 
 
     <h1>The City</h1> 
 
     <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="sections"> 
 
    <div class="header"> 
 
     <h1>Chania</h1> 
 
    </div> 
 

 
    <div class="row"> 
 

 
     <div class="col-3 menu"> 
 
     <ul> 
 
      <li>The Flight</li> 
 
      <li>The City</li> 
 
      <li>The Island</li> 
 
      <li>The Food</li> 
 
     </ul> 
 
     </div> 
 

 
     <div class="col-6"> 
 
     <h1>The City</h1> 
 
     <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

出典

2017-09-29 user8643495

、これは間違いなくので、このような類似した質問をチェックアウトhttps://stackoverflow.com/questions/18344904/how-to-align-two-前に投稿されましたdivs-side-by-side-float-clear-and-overflow-elements – SMT

[フロート、クリア、およびオーバーフロー要素を固定した位置で2つのdivを並べる方法div /] （https://stackoverflow.com/questions/18344904/how-to-align-two-divs-side-by-side-using-the-float-clear-and-overflow-elements） –

Theresの複数のオプションが、1つは、あなたが（あまりにも指定された分幅のいくつかのタイプの）.sectionに.whole、その後position: absolute;とwidth: 50%;にposition: relative;を置くことができるということです。最初の.section divにはleft: 0;を追加し、もう1つには.sectionを追加すると、right: 0;を追加できます。

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
* { 
    box-sizing: border-box; 
} 
.row::after { 
    content: ""; 
    clear: both; 
    display: table; 
} 
[class*="col-"] { 
    float: left; 
    padding: 15px; 
} 
body { 
    font-family: "Lucida Sans", sans-serif; 
} 
.header { 
    width: 500px; 
    background-color: #9933cc; 
    color: #ffffff; 
    padding: 15px; 
} 
.menu ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
.menu li { 
    padding: 8px; 
    margin-bottom: 7px; 
    background-color: #33b5e5; 
    color: #ffffff; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
} 
.menu li:hover { 
    background-color: #0099cc; 
} 
@media only screen and (min-width: 600px) { 
    /* For desktop: */ 
    .col-3 {width: 15%;} 
    .col-6 {width: 20%;} 
} 
.sections { 
width: 50%; 
min-width: 500px; 
position: absolute; 
} 

.sections.left { 
    left: 0; 
} 

.sections.right { 
    right: 0; 
} 

.whole { 
position: relative; 
top: 0; 
} 
</style> 
</head> 
<body> 

<div class="whole"> 
<div class="sections left"> 
<div class="header"> 
    <h1>Chania</h1> 
</div> 

<div class="row"> 

<div class="col-3 menu"> 
    <ul> 
    <li>The Flight</li> 
    <li>The City</li> 
    <li>The Island</li> 
    <li>The Food</li> 
    </ul> 
</div> 

<div class="col-6"> 
    <h1>The City</h1> 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
</div> 
</div> 
</div> 

<div class="sections right"> 
<div class="header"> 
    <h1>Chania</h1> 
</div> 

<div class="row"> 

<div class="col-3 menu"> 
    <ul> 
    <li>The Flight</li> 
    <li>The City</li> 
    <li>The Island</li> 
    <li>The Food</li> 
    </ul> 
</div> 

<div class="col-6"> 
    <h1>The City</h1> 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
</div> 
</div> 

</div> 
</div> 

</body> 
</html>

次に、.sectionの子要素の一部の幅を調整します。子要素をフローティングにしたい場合は、親にfloatを適用しませんが、子要素にも1300pxの幅があり、問題が発生していました。さておき、私のコメントから

出典

2017-09-29 16:16:25 SMT

私は1300ピクセル幅に設定しましたそのコンテンツはそれほどマージされず、それは共同しないでしょう私はそれをサイズ変更するときにdivコンテナから私を取り出してください。私はあなたのことを試してみましたが、サイズを33％に変更するとコンテンツが出てきて、サイズを150％-250％に変更すると重なり合ってしまいます:( – user8643495

幅を50％に設定してから分-widthとmax-width？ – SMT

あなたのコードを使用して、幅が1000pxの.sectionsに保持されています。コンテンツがもう出てこないのですが、唯一の問題はサイズを110％にすると重なります。 – user8643495

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<style> 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 
[class*="col-"] { 
 
    float: left; 
 
    padding: 15px; 
 
} 
 
body { 
 
    font-family: "Lucida Sans", sans-serif; 
 
} 
 
.header { 
 
    width: auto; 
 
    background-color: #9933cc; 
 
    color: #ffffff; 
 
    padding: 15px; 
 
} 
 
.menu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.menu li { 
 
    padding: 8px; 
 
    margin-bottom: 7px; 
 
    background-color: #33b5e5; 
 
    color: #ffffff; 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
} 
 
.menu li:hover { 
 
    background-color: #0099cc; 
 
} 
 
@media only screen and (min-width: 600px) { 
 
    /* For desktop: */ 
 
    .col-3 {width: 15%;} 
 
    .col-6 {width: 20%;} 
 
} 
 
.sections { 
 
width: 50%; 
 
float:left; 
 
} 
 
.whole { 
 
float: left; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="whole"> 
 
<div class="sections"> 
 
<div class="header"> 
 
    <h1>Chania</h1> 
 
</div> 
 

 
<div class="row"> 
 

 
<div class="col-3 menu"> 
 
    <ul> 
 
    <li>The Flight</li> 
 
    <li>The City</li> 
 
    <li>The Island</li> 
 
    <li>The Food</li> 
 
    </ul> 
 
</div> 
 

 
<div class="col-6"> 
 
    <h1>The City</h1> 
 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
 
</div> 
 
</div> 
 
</div> 
 

 
<div class="sections"> 
 
<div class="header"> 
 
    <h1>Chania</h1> 
 
</div> 
 

 
<div class="row"> 
 

 
<div class="col-3 menu"> 
 
    <ul> 
 
    <li>The Flight</li> 
 
    <li>The City</li> 
 
    <li>The Island</li> 
 
    <li>The Food</li> 
 
    </ul> 
 
</div> 
 

 
<div class="col-6"> 
 
    <h1>The City</h1> 
 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
 
</div> 
 
</div> 
 

 
</div> 
 
</div> 
 

 
</body> 
 
</html>

出典

2017-09-29 16:20:39

2つのグリッドビューを互いに近くに配置するにはどうすればよいですか？

答えて

関連する問題