在CSS中使用<section>

我在一個網站上工作，我需要一些幫助部分標籤和樣式不同大小的框與我的CSS。在CSS中使用<section>

我工作的一個節日的網站，並會爲每個事件，這些事件橙色盒子。每個盒子的內容少於或多於下一個，但所有盒子保持相同的高度。我怎樣才能讓每個盒子的高度根據其內容進行調整？

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>

來源

2012-03-19 kia4567

不清楚當你聲明「我使用的CSS沒有讓它們的高度設置爲自動」時你的意思。什麼是不工作，你想解決什麼？ – kinakuta 2012-03-19 05:45:07

我修正了措辭，所以如果你再次閱讀這個問題，我已經給出了一個更好的描述。 – kia4567 2012-03-19 05:50:20

嘗試浮動的標籤從

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

來源

2012-03-19 06:05:54 Kaushtuv

工作正常！你做了什麼？只是最小高度？ – kia4567 2012-03-19 06:12:53

不，我添加浮法：留在你的divs，如果你看看我已經添加到他們每個人的CSS。 – Kaushtuv 2012-03-19 06:14:10

@Kaushtuv 我推薦同樣的東西:) – Jashwant 2012-03-19 06:18:05

你.events-text有top:-205px和#events-box section img有類似190px高度。它們都會添加到205px + 190px +左右的部分高度（一些邊距和填充+邊框）。所以，你的每個部分都有大約400px的高度。

我不認爲它是一個很好的方法來破壞負面的東西。

我推薦使用float。

讓您#events-box section imgfloat:left和.events-text到float:right和#events-box section到clear:both。我已經在螢火蟲上測試過它。它的作品:)

我希望它會幫助你。

來源

2012-03-19 06:17:17 Jashwant

非常感謝！ – kia4567 2012-03-19 06:33:24

@Amber如果它可以幫助你，大拇指。 – Jashwant 2012-03-19 06:36:36

在CSS中使用<section>

回答

相關問題