[英]What to do to align text as shown in the image using HTML and CSS?
我正在嘗試對齊文本塊,以使其看起來像圖像中的文本。 但是,沒有令人滿意的結果。 文本位於重復的浮動div中。 相同的分區彼此相鄰。
我的HTML代碼:
<div id="bottomPanel">
<div class="bottomItem">
<img src="image.png" alt="mouse" class="imgBottom">
<a href="#" title="description" class="item_bottomDesc">Lorem ipsum dolor sit amet</a>
<p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
</div>
</div>
我的CSS代碼:
#bottomPanel {
float: left;
width: 100%;
text-align: center;
}
.bottomItem {
float: left;
width: 100%;
margin-top: 10px;
background-color: #e6e6e6;
}
.imgBottom {
float: left;
padding-top: 25px;
padding-left: 14px;
}
.item_bottomDesc {
float: left;
font-family: Arial;
font-weight: bold;
font-size: 12px;
text-decoration: none;
color: #133855;
padding-top: 42px;
padding-left: 18px;
display: block;
}
.item_bottomAbout {
float: left;
font-family: Arial;
font-size: 12px;
width: 376px;
height: auto;
text-align: justify;
display: block;
padding-top: 50px;
color: #7b7a79;
}
這是元素的外觀:
我無法正確對齊的文字很長。 除法的寬度為100%,約為 774px。 bottomPanel是所有浮動.bottomItem所在的div。 有任何想法嗎?
因此,總體而言,這里沒有太多錯誤。 只是您還有一些不需要的東西。
即, bottomDesc
和bottomAbout
不需要是float
版,和padding-top
為這兩個元件無需調整過。
我還為圖像添加了明確的寬度/高度,可以根據需要隨意調整,但是定義它是一個好主意。 我還用適當的margin
替換了其padding
。
最后,我完全刪除了#bottomPanel
樣式-此處再次不需要float
,並且width:100%
仍然是默認設置。 另外, text-align:center
也是不必要的。
這是修改后的代碼供您查看:
.bottomItem { float: left; width: 100%; margin-top: 10px; background-color: #e6e6e6; } .imgBottom { float: left; margin: 14px; width: 100px; height: 100px; } .item_bottomDesc { font-family: Arial; font-weight: bold; font-size: 12px; text-decoration: none; color: #133855; padding-top: 14px; padding-left: 18px; display: block; } .item_bottomAbout { font-family: Arial; font-size: 12px; width: 376px; height: auto; text-align: justify; display: block; }
<div id="bottomPanel"> <div class="bottomItem"> <img src="http://placehold.it/100x100" alt="mouse" class="imgBottom"> <a href="#" title="description" class="item_bottomDesc">Lorem ipsum dolor sit amet</a> <p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p> </div> </div>
我建議您使用flexbox
而不是float
,而不必使用padding
獲取垂直對齊。
.bottomItem { display: flex; flex-direction: row; align-items: center; margin: 10px; } .right { max-width: 60%; margin: 0 10px; }
<div id="bottomPanel"> <div class="bottomItem"> <img src="http://placehold.it/150x150"> <div class="right"> <a href="#" title="description" class="item_bottomDesc">Lorem ipsum dolor sit amet</a> <p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p> </div> </div> <div class="bottomItem"> <img src="http://placehold.it/150x150"> <div class="right"> <a href="#" title="description" class="item_bottomDesc">Lorem ipsum dolor sit amet</a> <p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p> </div> </div> <div class="bottomItem"> <img src="http://placehold.it/150x150"> <div class="right"> <a href="#" title="description" class="item_bottomDesc">Lorem ipsum dolor sit amet</a> <p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p> </div> </div> </div
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.