Question

我正在尝试为假想的比萨店创建一个网页作为练习。我想在两个图像（相同）之间插入网页的标题，使得三个（图像，标题，图像）元素排成一行。但是下面的代码我得到了这样的屏幕。如何将它们全部放在一条线上？

<body>
  <div style='float:left'>
    <img src='body.png' style='width:100px; height:100px;'>
  </div>
  <div style='font-family:amita; font-size:20px;'>
    <h1 align='center' style='margin-bottom:5px;'>Ralph's Pizzeria</h1>
  </div>
  <div style='float:right'>
    <img src='body.png' style='width:100px; height:100px;'>
  </div>
  <hr style='clear:both;' />
</body>

Answer 1

可以使用Public ReadOnly Property TestProp() As Integer Get Return 0 End Get End Property和display: flex：

来完成

＆＃13;

justify-content: space-between

＆＃13;

.header {
display: -webkit-box;
display: -ms-flexbox;
display: flex; 
-webkit-box-pack: justify; 
    -ms-flex-pack: justify; 
        justify-content: space-between;
}

＆＃13;

我添加了一个容器div，并为其提供了类<div class="header"> <div> <img src='body.png' style='width:100px; height:100px;'> </div> <div style='font-family:amita; font-size:20px;'> <h1 align='center' style='margin-bottom:5px;'>Ralph's Pizzeria</h1> </div> <div> <img src='body.png' style='width:100px; height:100px;'> </div> </div>并将flexbox应用于它。

Answer 2

你可以这样做：

header {
  text-align: center;
}

h1 {
  font-size: 25px;
  display: inline-block;
  vertical-align: top;
  margin-top: 25px;
}

img {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin:0 10px;
}

<header>
  <img src='https://lorempixel.com/100/100/'>
  <h1>Ralph's Pizzeria</h1>
  <img src='https://lorempixel.com/100/100/'>
</header>
<hr>

Answer 3

如果你想继续使用float，这是另一个解决方案只需将第二张图像移动到标题之前。

＆＃13;

<body>
		<div style='float:left'>
			<img src='body.png' style='width:100px; height:100px;'>
		</div>
		<div style='float:right'> <!-- Just moved this up here -->
			<img src='body.png' style='width:100px; height:100px;'>
		</div>
		<div style='font-family:amita; font-size:20px;'>
			<h1 align='center' style='margin-bottom:5px;'>Ralph's Pizzeria</h1>
		</div>
		<hr style='clear:both;'/>
	</body>

＆＃13;

但是，如果您不必支持旧浏览器，我建议使用flex-box。

如何在同一行的两个图像之间放置标题（使用<div>块）？

3 个答案: