2柱;多手風琴窗格

好吧，我有一些問題，我相信這是一個CSS的。以下是我目前的工作：http://www.notedls.com/demo/2柱;多手風琴窗格

專注於新聞手風琴菜單。這裏的想法是有一個小圖像（填充50x50），然後旁邊有一個巨大的標題。當用戶點擊標題時，它會擴展到文章。如果用戶想閱讀評論或自己發表評論，他們可以點擊查看評論進一步擴展。

我遇到的問題（如果不明確）是與圖像和文本的間距。我可以簡單地增加ui.accordion-acc或-left的高度以使所有內容都適合，但這並不能解決問題。如果您注意到當您點擊標題1的第一個展開式廣告時，它會在圖像下面包裝「查看評論」。這是我不想要的東西，我嘗試將這些元素分離爲更多的div，甚至浮動，但它只是不工作。從本質上講，無論文章+評論可能需要多長時間，我都希望圖片下面有無限的空間。

來源

2010-04-02 Josh

嘗試加入這個CSS：

ul#acc1 .acc1 { padding-left: 50px; } /* headline */ 
ul#acc1 > li > div { padding-left: 55px; } /* text block under headline */ 
ul#acc1 ul li { padding-left: 0; width: 487px; } /* View Comments */ 
ul#acc1 ul li div { padding-left: 20px; } /* text here under view comments */

我不得不減少的觀點意見的塊大小，因爲它推出的權利。調整50像素，55像素，487像素（設置寬度542像素減去55像素）和20像素（只是縮進評論多一點）以匹配縮略圖大小。

那麼這個問題是有一個手風琴內的手風琴，所以當你添加像ul.ui-accordion-container li a.ui-accordion-link通用手風琴CSS類它影響的水平。這就是爲什麼評論向下移動了62px。

你已經有更具體的類可以使用...試試這個ul.ui-accordion-container li a.acc1，但我不會建議給鏈接添加高度，而是將其添加到<h1>以匹配縮略圖高度。所以試試這個：

h1 { 
float: left; 
margin: 0px; 
padding: 1px; 
font-size: 30px; 
color: #9667cc; 
height: 65px; 
} 
ul.ui-accordion-container li a.acc1 { 
display: block; 
padding-left: 5px; 
margin-right: 3px; 
height: 62px; 
color: #000; 
text-decoration: none; 
line-height: 28px; 
} 
ul.ui-accordion-container li a.acc2 { 
line-height: 28px; 
}

來源

2010-04-02 17:14:13 Mottie

嗯，它的工作，有點。我必須增加ui-accordion-left acc1的高度，以便它可以適合所有內容，但是現在我在View Comments和實際評論的位置之間會出現這些離譜的差距。另外，在「文章文本」的第一行之後，我得到了這個奇怪的縮進。 – Josh 2010-04-03 14:55:37

我已經更新了我的答案......我希望這更接近你想要的。 – Mottie 2010-04-03 16:13:17

啊！很好，謝謝一堆！我一直在盯着這個廢話這麼久哈哈D： – Josh 2010-04-03 16:27:43

怎麼浮動不起作用？我想你可以這樣做：

.img {float: left; width: 50px; padding: 5px;} 
.title {float: left; width: 300px; padding: 5px;} 
.clear {clear: both; height: 1px;} 

<div class="img"><img src="img/news_ffxiv_a.jpg"></div> 
<div class="title">TITLE</div> 
<div class="clear"><!-- --></div>

這應該圖像下創造無限空間，因爲在其他分區是向左浮動反對。關鍵是漂浮兩個項目，而不僅僅是一個。

來源

2010-04-03 00:22:19 user279860

2柱;多手風琴窗格

回答

相關問題