Question

我希望<h2>和<h2>位于图片右侧，但<h1>必须位于<html> <link rel="stylesheet" href="style.css"> <img src="images/SelzerSeal.jpg" alt="Henry Selzer attorney at law"> <h1>Test</h1><br> <h2>Test 2</h2> </html>之下。我该怎么做？

我的代码

img {
max-width: 100%;
text-align: center;
float:left;
}
h1{
color:white;
font-size: 24px;
float:left;
font-family:"Book Antiqua";
}
h2 {
color:white;
font-size:20px;
float:left; 
font-family:"Times New Roman";
}

CSS

{{1}}

Answer 1

尝试在两个标头标签上删除float: left;属性，同时删除html中的<br>标记，并使用类＆＃34;清除＆＃34;没有必要。

以下是一个例子：

https://jsfiddle.net/t769avo2/

Answer 2

试试这个：

.img {
  float: left;
  margin-right: 10px;
}

<img src="http://lorempixel.com/400/200" alt="" class="img">
<h1>Header H1</h1>
<h2>Header H2</h2>

我希望我帮助过你。

Answer 3

只需从标题标记中删除floats：

＆＃13;

body {
  background:#000;
}
img {
  max-width: 100%;
  text-align: center;
  float:left;
}
h1{
  color:white;
  font-size: 24px;
  font-family:"Book Antiqua";
}
h2 {
  color:white;
  font-size:20px;
  font-family:"Times New Roman";
}

＆＃13;

<img src="http://placehold.it/250x250" alt="Henry Selzer attorney at law">
<h1>Test</h1><br>
<h2>Test 2</h2>

＆＃13;

Answer 4

您不需要将float添加到h1或h2

See demo

<html>
<link rel="stylesheet" href="style.css">
<img src="images/SelzerSeal.jpg" alt="Henry Selzer attorney at law">
<h1>Test</h1>
<h2>Test 2</h2>
</html>

img {
max-width: 100%;
float:left;
margin-right: 1%}
h1{
color:white;
font-size: 24px;
font-family:"Book Antiqua";
}
h2 {
color:white;
font-size:20px;
font-family:"Times New Roman";
}

将标题1和标题2移动到图像右侧

4 个答案: