如何使用 HTML 和 CSS 对齐图像中显示的文本?
What to do to align text as shown in the image using HTML and CSS?
我正在尝试对齐一段文本,使其看起来像图像中的那样。然而,没有可接受的结果。文本位于重复的浮动 div 中。相同的 divisions 漂浮在彼此旁边。
我的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% 的宽度,大约是。 774 像素。 bottomPanel 是一个 div 所有浮动的 .bottomItem 所在的位置。
有什么想法吗?
总的来说这里没有太大的错误。只是你有一些你不需要的额外东西。
也就是说,bottomDesc
和 bottomAbout
而不是 需要 float
ed,而这两个 padding-top
元素也需要调整。
我还为图像添加了一个明确的 width/height,您可以根据需要随意调整,但定义它是个好主意。我还将其 padding
替换为适当的 margin
s.
最后,我完全删除了 #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
我正在尝试对齐一段文本,使其看起来像图像中的那样。然而,没有可接受的结果。文本位于重复的浮动 div 中。相同的 divisions 漂浮在彼此旁边。
我的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% 的宽度,大约是。 774 像素。 bottomPanel 是一个 div 所有浮动的 .bottomItem 所在的位置。 有什么想法吗?
总的来说这里没有太大的错误。只是你有一些你不需要的额外东西。
也就是说,bottomDesc
和 bottomAbout
而不是 需要 float
ed,而这两个 padding-top
元素也需要调整。
我还为图像添加了一个明确的 width/height,您可以根据需要随意调整,但定义它是个好主意。我还将其 padding
替换为适当的 margin
s.
最后,我完全删除了 #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