我是后端编码员,我是前端开发的新手,但我现在有空闲时间,我想尝试学习 HTML/CSS 的基础知识 :)
这些图片描述了我的问题:
我有追随者。左侧为简单信息,右侧为标题。
但如果标题很长,我的标记就会变坏:
我想实现这个(画图):
换句话说,如果标题太长,我想增加主(灰色) block 的高度并垂直居中其内容。
这是我的代码:
<div class="header"> <!-- Main (gray) block -->
<div class="author">
<div class="left">
<img src="http://cs421319.vk.me/v421319968/b0e1/ljfuXCyMOFI.jpg" width="50" height="50"/>
</div>
<div class="author_details">
<span class="name">_Dark_</span>
<br>
<span class="time">01.01.2014 — 23:59 </span>
</div>
</div>
<div class="title">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin, est non tempus lacinia, urna. </h1>
</div>
</div>
而且更少:
.header {
min-height: 60px;
background-color: #EEE;
padding: 5px;
-moz-box-sizing: border-box;
box-sizing: border-box;
.title {
display: inline-block;
vertical-align: top;
}
h1 {
font-weight: normal;
font-size: 24px;
margin: 0;
}
.author {
max-width: 200px;
display: inline-block;
border-right: 1px solid #CCC;
}
.author_details {
margin: 0 0 0 55px;
padding: 0 5px 0 0;
.name {
font-size: 20px;
font-weight: bold;
}
.time {
font-size: 12px;
}
}
}
抱歉,如果我把我的问题解释得不好,但我真的不知道该怎么做,我需要一些关于我的(丑陋的)代码的建议:)
最佳答案
您的代码 (HTML) 没问题,但可以更简化,元素更少:
<div class="infoBox">
<p>
<img src="http://cs421319.vk.me/v421319968/b0e1/ljfuXCyMOFI.jpg" />
_Dark_<br />
<span>01.01.2014 — 23:59 </span>
</p>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin, est non tempus lacinia, urna. </h1>
</div>
有了这个 CSS(添加了一些注释来解释某些事情的作用)。
.infoBox {
min-height: 60px;
background: #eee;
padding: 5px;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: table; /* display the box as table */
width: 100%;
}
.infoBox > p, /* selects all p that are direct child of .infoBox */
.infoBox > h1 {
display: table-cell; /* display the p and h1 as a table cell */
}
.infoBox > p {
width: 200px;
margin: 0;
padding: 0;
font-size: 20px;
font-weight: bold;
}
.infoBox > p img {
width: 50px;
height: 50px;
margin-right: 5px;
float: left;
}
.infoBox > p span {
font-size: 12px;
font-weight: normal;
}
.infoBox > h1 { /* select h1 that is a direct child of .infoBox */
font-size: 14px;
margin: 0;
padding: 0;
}
同时检查这个 demo .
关于html - 如果其中的文本太长,则垂直居中 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19273638/