2

我在尝试将图像和 h1 标签对齐在一行时遇到问题。我试过 display: inline 和 inline-block 他们没有工作，只做了两者的容器。我在该部分将宽度添加到 100%，但仍然没有。浮动也不起作用，如果起作用，它会破坏页面的对齐方式。我究竟做错了什么？在此处查看我的完整源代码：http: //jsfiddle.net/TheAmazingKnight/bkmyv/

HTML

<section>
    <img id="me" src="assets/img/pose1.jpg" alt="A photo of me." />
    <h1>FOLLOW ME ON...</h1>
</section>

CSS

section{
display:inline-block;
width:100%;
}
h1{
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
display:inline-block;
}
4

3 回答 3

5

这是因为图像默认显示为块元素，所以它们占据了一整行。

将您的图像更改display: inline-block;为与您的h1元素一样。

h1, img {
    display: inline-block;
}

这是一个小提琴：

http://jsfiddle.net/ps2ms/

于 2013-09-07T19:21:25.920 回答
2

我添加float:left;到#me和小提琴float:right;h1 

#me{
  width: 600px;
  height: 400px;
  display: block;
  margin: 10px 10px;
  float: left;
}
h1{
  display:inline-block;
  font-weight:bold;
  font-size:40px;
  color:#FFFFFF;
  background-color:#FFB405;
  float: right;
  margin: 10px;
}
于 2013-09-07T19:23:48.177 回答
0

只需给部分中的 img 一个 float: left。

于 2013-09-07T19:24:04.363 回答