如何将两个网格视图放在彼此附近？

我从头开始制作网站。我在w3school看到了网格视图，并想到使用它。无论如何，我用我的.whole元素留下的浮动，但它不工作。我已经尝试改变它清除左侧，但它不工作。有人能帮我把两个.sections元素放在一起吗？如何将两个网格视图放在彼此附近？

* { 
 
    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-the-float-clear-and-overflow-elements – SMT

[如何将两个div并排使用浮动，清除和溢出元素与固定位置div对齐] （https://stackoverflow.com/questions/18344904/how-to-align-two-divs-side-by-side-using-the-float-clear-and-overflow-elements） –

即使世界多个选项但一个是你可以把position: relative;上的.section的.whole然后position: absolute;和width: 50%;（某种类型的太指定最小宽度的）。然后在第一个.section股利可以添加left: 0;和另一个.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的一些子元素的宽度。如果您想要浮动子元素，则不会将浮点值应用于父元素，但此外您的子元素上也有1300px的宽度，这也会对您造成问题。

来源

2017-09-29 16:16:25 SMT

我将其设置为1300px宽度所以内容不会如此合并，也不会合作当我调整它时，我离开了div容器。我尝试过你，当我调整到33％的内容出来时，当我调整到150％-250％它重叠.. :( – user8643495

你不能设置宽度为50％，然后设置一个分钟宽度和最大宽度？ – 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

如何将两个网格视图放在彼此附近？

回答

相关问题