我有一个居中的容器 div,里面目前有 3 个其他 div。它们都有盒子阴影(因此添加了大约 5px 的边距)。
我遇到的问题是第一个 div(upcoming) 是 100% 宽度,并且在右侧被切断(overflow: hidden
设置)。或者它溢出它包含一点 div 。这没关系,但下面的其他 2 个 div 浮动并并排,因此不会溢出一点(如果大小设置为超过可用空间,则最近的 div 移动到最新的下方)。
填充没有帮助。除了将宽度设置为 98% 之外,还有其他解决方案吗?
这是我正在使用的CSS:
.mainSection{
width:1020px;
margin:70px auto 0px auto;
}
.widget{
background-color:rgba(255, 255, 255, 0.5);
-webkit-box-shadow:0 0 5px 2px #CCC;
-moz-box-shadow:0 0 5px 2px #CCC;
box-shadow:0 0 5px 2px #CCC;
border:1px solid #CCC;
margin:4px;
overflow:hidden;
}
/* 3 child divs */
.widget.upcoming{
float:left;
width:100%;
height:380px;
}
.widget.recent{
float:right;
width:260px;
height:auto;
}
.widget.latest{
float:left;
width:740px;
height:460px;
}
<section class="mainSection">
<article class="widget upcoming">
<header>
<h3>Upcoming</h3>
</header>
</article>
<article class="widget news">
<article>
<p>Some text</p>
</article>
</article>
<article class="widget latest">
<header>
<h3>Latest</h3>
</header>
</article>
<aside class="widget recent">
<header>
<h3>Recent</h3>
</header>
</aside>
</section>