我在另一个div内有4个小div。不知怎的,不是在里面显示小的,它们显示在下面!
在玩完游戏后我尝试使用Google来解决问题。似乎很简单但我找不到任何相关的东西。
https://jsfiddle.net/j4pnh0rz/
这就是它现在的表现:
______________________________________________
| Mat |
______________________________________________|
________ ________ ________ ________
| | | | | | | |
| B | | C | | A | | M |
|_______| |_______| |_______| |_______|
这是应该的方式:
______________________________________________
| Mat |
| ________ ________ ________ ________ |
| | | | | | | | | |
| | B | | C | | A | | M | |
| |_______| |_______| |_______| |_______| |
______________________________________________|
答案 0 :(得分:1)
添加
<div style="clear: both;"></div>
后立即
<div class="mat green">
<p class="symbol">M</p>
</div>
答案 1 :(得分:1)
您的div设置为display: block;
将其更改为display: inline-block
html,
body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
font-family: Tahoma, sans-serif;
}
div {
display: inline-block;
margin: 0;
padding: 0;
border: 0;
border-collapse: collapse;
}
.inner {
width: 94%;
margin: 0 2%;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(153, 153, 153, 0.75);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(153, 153, 153, 0.75);
box-shadow: inset 0px 0px 10px 0px rgba(153, 153, 153, 0.75);
padding: 5px;
}
div.main {
padding-top: 15px;
padding-bottom: 25px;
width: 35%;
max-width: 350px;
min-width: 238px;
float: left;
}
@media screen and (max-width: 700px) {
div.main {
margin: 0 auto;
width: 80%;
max-width: 560px;
min-width: 350px;
float: none;
}
}
div.mat {
text-align: center;
float: left;
width: 22%;
padding: 1%;
}
div.green {
background-color: #77bb77;
border: 1px solid #559955;
}
div.yellow {
background-color: #bbbb77;
border: 1px solid #999955;
}
div.red {
background-color: #bb7777;
border: 1px solid #995555;
}
p {
font-size: 13pt;
color: #222;
margin: 0.5em;
}
.lead {
font-size: 15pt;
color: #111;
font-family: Verdana, sans-serif;
}
.small {
font-size: 10pt;
color: #222;
}
.symbol {
margin: 0 !important;
font-size: 20pt;
color: #111;
font-weight: bold;
text-transform: uppercase;
}
<div class="main">
<div class="inner">
<p class="lead">Mat <span class="small"><a href="#">view more</a></span>
</p>
<div class="mat green">
<p class="symbol">B</p>
</div>
<div class="mat yellow">
<p class="symbol">C</p>
</div>
<div class="mat red">
<p class="symbol">A</p>
</div>
<div class="mat green">
<p class="symbol">M</p>
</div>
</div>
</div>
答案 2 :(得分:1)
答案 3 :(得分:0)
您也可以使用clearfix
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix {
*zoom: 1;
}
.clearfix:after {
clear: both;
}
为clearfix
inner
html, body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
font-family: Tahoma, sans-serif;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix {
*zoom: 1;
}
.clearfix:after {
clear: both;
}
div {
display:block;
margin: 0;
padding: 0;
border: 0;
border-collapse: collapse;
}
.inner {
width: 94%;
margin: 0 2%;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(153, 153, 153, 0.75);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(153, 153, 153, 0.75);
box-shadow: inset 0px 0px 10px 0px rgba(153, 153, 153, 0.75);
}
div.main {
padding-top: 15px;
padding-bottom: 25px;
width: 35%;
max-width: 350px;
min-width: 238px;
float: left;
}
@media screen and (max-width: 700px) {
div.main {
margin: 0 auto;
width: 80%;
max-width: 560px;
min-width: 350px;
float:none;
}
}
div.mat {
text-align: center;
float: left;
width: 22%;
padding: 1%;
}
div.green {
background-color: #77bb77;
border: 1px solid #559955;
}
div.yellow {
background-color: #bbbb77;
border: 1px solid #999955;
}
div.red {
background-color: #bb7777;
border: 1px solid #995555;
}
p {
font-size: 13pt;
color: #222;
margin: 0.5em;
}
.lead {
font-size: 15pt;
color: #111;
font-family: Verdana, sans-serif;
}
.small {
font-size: 10pt;
color: #222;
}
.symbol {
margin: 0 !important;
font-size: 20pt;
color: #111;
font-weight: bold;
text-transform: uppercase;
}
&#13;
<div class="main">
<div class="inner clearfix">
<p class="lead">Mat <span class="small"><a href="#">view more</a></span>
</p>
<div class="mat green">
<p class="symbol">B</p>
</div>
<div class="mat yellow">
<p class="symbol">C</p>
</div>
<div class="mat red">
<p class="symbol">A</p>
</div>
<div class="mat green">
<p class="symbol">M</p>
</div>
</div>
</div>
&#13;
答案 4 :(得分:0)