Question

我希望图像不能并排显示。

我尝试添加float：left，但这没有帮助。

<div class="body">
  <div style="
                        display:inline-block; 
                        width: 33.33%;
                        height:110px;  background: url(https://wallpaperfm.com/img/original/6/1/3/13347.jpg) no-repeat center center; 
                            -webkit-background-size: cover;
                            -moz-background-size: cover;
                            -o-background-size: cover;
                            background-size: cover;" </div>
    <div style="
                         display:inline-block; 
                        width: 33.33%;
                        height:110px;  background: url(https://wallpaperfm.com/img/original/6/1/3/13347.jpg) no-repeat center center; 
                            -webkit-background-size: cover;
                            -moz-background-size: cover;
                            -o-background-size: cover;
                            background-size: cover;" </div>
      <div style="
                         display:inline-block; 
                        width: 33.33%;
                        height:110px; vertical-align:top; background: url(https://wallpaperfm.com/img/original/6/1/3/13347.jpg) no-repeat center center; 
                            -webkit-background-size: cover;
                            -moz-background-size: cover;
                            -o-background-size: cover;
                            background-size: cover;" </div>

Answer 1

如@LeeTaylor所述，您的divs未被关闭并缺少>。

第二，现在不建议使用内联样式来进行标记，而是使用级联样式表（CSS）并使用元素类和或ID来应用集合样式。

使用Flexbox进行修复的示例。

.flex{
	display:flex;
	justify-content:center;
}
.img-div{
    width: 33.33%;
    height:110px;  
	background: url(https://wallpaperfm.com/img/original/6/1/3/13347.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
	<!-- You add the Stylesheet to the html file in the head like this -->
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
<body>    
	<div class="flex">
		<div class="img-div"> </div>
		<div class="img-div"> </div>
		<div class="img-div"> </div>
	</div>
</body>
</html>

More information on CSS and its usage

Answer 2

赋予float: left风格。
结束您的div起始标签。

代码：

<div style="
  display:inline-block; 
  width: 33.33%;
  height:110px;  background: url(https://wallpaperfm.com/img/original/6/1/3/13347.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  float: left;"></div>
<div style="
  display:inline-block; 
  width: 33.33%;
  height:110px;  background: url(https://wallpaperfm.com/img/original/6/1/3/13347.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  float: left;"></div>
<div style="
  display:inline-block; 
  width: 33.33%;
  height:110px; vertical-align:top; background: url(https://wallpaperfm.com/img/original/6/1/3/13347.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  float: left;"></div>

如何将图像并排而不是彼此对齐？

2 个答案: