並排顯示兩個部分
[英]Side by side display of two sections
問題描述
我是一個初學者，就像大多數初學者一樣，我正在努力做一些我認為比現在更簡單的事情。
作為任務的一部分，我將為博客條目創建一個布局，在該布局中，日期和作者將顯示在左側的列中（以下代碼中的roundel-container ），而內容本身（ articlebody ）帶有“閱讀更多”按鈕和注釋鏈接readmore-footer （ readmore-footer ）將形成右側第二個較寬的列。 此圖像代表了我要實現的目標的簡化視圖 。
我一直在與position: ， left: ， right:和float:玩耍，但結果平庸（我可能由於缺乏練習而很可能）。 現在的代碼如下所示：
的HTML
<section class="articlebox">
<section class="roundel-container">
<div class="roundel left"><span class="bold">11 Nov 2013</span></div>
<div class="roundel left"><span class="bold">by John Doe</span></div>
</section>
<section class="articlebody">
<p class="readable">Lorem ipsum ...</p>
</section>
<footer id="readmore-footer">
<div class="button bold white" id="readmore-button">Read More</div>
<section class="right">
<p><a class="darkblue">10 likes</a> <a class="darkblue">22 comments</a></p>
</section>
</footer>
</section>
的CSS
.articlebody {
position: relative;
left: 0;
padding: 0px 15px 10px 15px;
}
.articlebox {
position: relative;
width: 100%;
overflow: hidden;
}
.roundel {
height: 80px;
width: 80px;
border-radius: 40px;
margin: 10px;
color: white;
background-color: #22aaec;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
align-items: center;
}
.roundel-container {
position: relative;
left: 0;
min-width: 220px;
}
#readmore-footer {
margin-top: 25px;
position: relative;
left: 0;
}
.left {
float: left;
width: 45%;
}
.button {
padding: 5px 15px;
margin-left: 12px;
margin-right: 12px;
}
.right {
float: right;
width: 45%;
}
非常感謝您提供的幫助，以及有關上述內容的任何提示和技巧。 謝謝！
2 個解決方案
解決方案1
2 2017-11-14 18:59:21
像這樣編寫代碼：
<!DOCTYPE html> <html> <head> <style> div.container { width: 100%; border: 1px solid gray; } header, footer { padding: 1em; border-top: 1px solid black; clear: left; } nav { float: left; max-width: 160px; margin: 0; padding: 1em; } nav ul { list-style-type: none; padding: 0; } nav ul a { text-decoration: none; } article { margin-left: 170px; border-left: 1px solid gray; overflow: hidden; } </style> </head> <body> <div class="container"> <nav> <p>roundel container</p> </nav> <article> <p>article body</p> <footer>readmore footer</footer> </article> </div> </body> </html>
注意：這只是演示，它將帶給您想法。 希望對您有幫助。 干杯!
解決方案2
0 已采納 2017-11-14 18:52:54
我最近開始對所有東西進行靈活裝箱，以實現所需的布局。 閱讀本文，它應該可以幫助您獲得所需的結構。 我盡可能地避免使用浮點數。
並排顯示折疊部分
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.