Question

我正在网站上工作，我需要一些部分标签的帮助，并使用我的CSS设计不同大小的框。

我正在开设一个节日网站，并为每个活动创建了这些橙色活动框。每个框的内容少于或多于下一个框，但所有框都保持相同的高度。我怎样才能让每个盒子的高度调整到里面的内容？

CSS

#events-box { margin: 60px 0 30px 0; width: 100%; }
#events-box section { width: 100%; height: auto; background: url(../img/RESTAURANT-highlight.jpg) no-repeat; background-color: #f4911e; margin-bottom: 30px; border: 1px solid #6f1200; }
#events-box section img { margin: 10px 10px 10px 10px; padding: 7px; border: 1px solid #333; }
#events-box section h1 { font-size: 1.6em; font-weight: bold; line-height: 23px; color: #721501; text-transform: uppercase; margin-top: 5px; text-align: left; }
#events-box section p { margin-top: 5px; width: 690px; color: #721501; }

.events-text { position: relative; left: 250px; top: -205px; width: 700px; height: 200px; /*border: 1px solid #000;*/ }
.events-text a {color: #721501; text-decoration: underline; font-weight:bold; font-size: 1em; margin: 0 3px 0 3px; }
.events-text a:hover {color: #fff; text-decoration: none; }

HTML ----这只是我所拥有的众多部分事件之一。我只是用这个作为我的代码的例子。

<article>
<section> 
<img src="img/events/EVENTS-hestercreek.jpg" alt="Shellshocked" />
<div class="events-text">
<h1>Saturday April 21st<br />
Cooking Class and private Dinner with Chef Jeremy Luypen from Terrafina at Hester Creek Winery.</h1>
<p>Begin with a wine and oyster reception at 6:30pm, followed by a private cooking class and intimate dinner in Hester Creek Winery's gourmet kitchen.</p>
<a href="http://www.hestercreek.com/">Tickets available exclusively through Hester Creek Winery</a>
<br/>Location: Hester Creek Winery
<br />Time: 6:30pm
<br />Price: $135.00. Includes wine pairings, recipes, taxes and gratuities.
</div>
</section>
</article>

Answer 1

尝试从

开始浮动代码

#events-box {
float: left;
margin: 60px 0 30px;
width: 100%;
}

#events-box section {
background: url("../img/RESTAURANT-highlight.jpg") no-repeat scroll 0 0 #F4911E;
border: 1px solid #6F1200;
float: left;
height: auto;
margin-bottom: 30px;
width: 100%;
}

#events-box section img {
border: 1px solid #333333;
float: left;
margin: 10px;
padding: 7px;
}

在这里添加min-height而不是height

.events-text {
float: left;
min-height: 200px;
position: relative;
width: 700px;
margin:0 0 18px 0;
}

Answer 2

.events-text top:-205px和#events-box section img的高度为190px。它们都会增加到你的截面高度大约205px + 190px +（一些边距和填充+边框）。所以，你的每个部分的高度都在400px左右。

我不认为这是用负顶部破解事物的好方法。

我建议使用float。

将#events-box section img float:left和.events-text与float:right和#events-box section保持在clear:both。我在firebug上测试过它。它有效:)

我希望它会对你有所帮助。

使用CSS </section>中的<section>

2 个答案: