Question

我尝试在图像的右侧有一个标题和作者姓名。标题必须与图像顶部对齐，如下图所示。

我尝试使用填充和边距，但现在，这是我得到的：

.post-head{
display: block;
position:relative;


}

.post-head-info {

  overflow:hidden;
  padding-top:0px;
  margin-top:0px;

}

.picture{
  float:left;
  overflow:hidden;
  position:relative;
  padding-right: 10px;
}

h1 {
  padding-top:0px;
  padding-bottom:0px;
  margin-top:0px;
  font-size: 24px;
}

span{
  padding-top: 0px;
  margin-top:0px;
}

<div class="post-head" >

  <div class="picture">
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Japan-bio-stub.png" />
  </div> 

  <div class="post-head-info" >

    <h1>Title</h1>
    <span>Posted on by author</span> 

  </div>

   </div>

Answer 1

间距是由line-height的{{1}}引起的。如果将其减少到大约20px，则应该意味着文本从div的顶部开始。请注意，如果您的文字包装，可能会导致您的文字重叠或靠近在一起，因为您的字体大小为24px。

另一种方法是向h1添加一些负余量。两个例子如下：

＆＃13;

h1

＆＃13;

.post-head {
  display: block;
  position: relative;
}

.post-head-info {
  overflow: hidden;
  padding-top: 0px;
  margin-top: 0px;
}

.picture {
  float: left;
  overflow: hidden;
  position: relative;
  padding-right: 10px;
}

h1 {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  font-size: 24px;
}

span {
  padding-top: 0px;
  margin-top: 0px;
}

.line-height {
    line-height:20px;
}

.minus-margin {
   margin-top:-4px;
}

＆＃13;

Answer 2

这可能更像是一个黑客而不是解决方案，但如果你正在寻找一个快速解决方案：

.post-head-info {
   overflow:hidden;
   padding-top:0px;
   margin-top:0px;
   line-height: .8; /* Add that */
}

基本上只使用负边距。

https://jsfiddle.net/8xd9x4qh/4/

Answer 3

SELECT array_to_json(array_agg(row_to_json(data)))
FROM (select name, age from your_table) data

Answer 4

你追求的是这样吗？根据需要使用边距和尺寸。

＆＃13;

img {
  float: left;
}
div {
  margin-left: 6px;
  float: left;
}
h1 {
  font-size: 20px;
  line-height: 20px;
  margin-top: 0;
  margin-bottom: 0;
}

＆＃13;

<img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Japan-bio-stub.png" />
<div>
  <h1>Title</h1>
  <span>Posted on by author</span>
</div>

＆＃13;

Answer 5

只需使用

       return '<a class="msubnav '+ class +'">'+
                   +parentTitle+
               '</a>';

负边距永远不会有用。只有真正必须拥有。或者给图片一个小幅度的顶部

Answer 6

我使用margin-top上的百分比降低了图片。似乎调整图像顶部定位将是解决此问题的方法。在您想要降低图片并且标题margin-top更接近跨度之后。

＆＃13;

.post-head{
display: block;
position:relative;


}

.post-head-info {

  overflow:hidden;
  padding-top:-3px;
  margin-top:0px;

}

.picture{
  float:left;
  overflow:hidden;
  position:relative;
  padding-right: 10px;
  margin-top: 0.6%;
}

h1 {
  padding-top:0px;
  padding-bottom:0px;
  margin-top:0px;
  font-size: 24px;
}

span{
  padding-top: 0px;
  margin-top:0px;
}

＆＃13;

<div class="post-head" >

  <div class="picture">
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Japan-bio-stub.png" />
  </div> 

<div class="post-head-info" >

  <h1>Title</h1>


  <span>Posted on by author</span> 



</div>

＆＃13;

Answer 7

问题是 h1 的行高。

ID    ClientID     Username     Email                   Phone            Software

1     29384        User 1      email@email.email        02932 423834     Software 1
2     29384        User 2      email@email.email        02134 234829     Software 2
3     12345        User 3      email@email.email        01293 021924     Software 1

.picture img{
	float:left;
}

.post-head-info{
	line-height: 1.3em;
}

.post-head-info h1{
	margin:0;
}

顶部对齐文本到图像

7 个答案: