html - 在 CSS 中使用

Question

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

This is my website

我在一个节日网站上工作，并为每个事件创建了这些橙色的事件框。每个盒子的内容比下一个盒子少或多，但所有盒子都保持相同的高度。我怎样才能让每个盒子的高度都根据里面的内容进行调整？

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 ---- 这只是我拥有的众多版 block 事件之一。我只是用这个作为我的代码的例子。

<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

尝试从以下位置开始 float 您的标签

#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;
}

在这里添加最小高度而不是高度

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