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

Question

I want the images to display side by side not on top of each other. 我希望图像不能并排显示。

I tried adding float:left but that didn't help. 我尝试添加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

As mentioned by @LeeTaylor, your divs aren't being closed and missing > s. 正如@LeeTaylor所提到的，您的divs没有被关闭并且缺少> s。

Secondly, using inline style is not the recommended way to do markup now but to use Cascading Style Sheets ( CSS ) instead and use element classes and or id's to apply set styling. 其次，不建议立即使用内联样式来进行标记，而应使用级联样式表（ CSS ）并使用元素类和/或ID来应用集合样式。

Example with Fix using Flexbox . 使用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 有关CSS及其用法的更多信息

Answer 2

Give float: left in style. 给float: left样式。
End your starting div tag. 结束您的起始div标签。

Code: 码：

 <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 个解决方案

解决方案1
1 2019-08-25 16:38:58

解决方案2
0 2019-08-25 16:15:58

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

问题描述

2 个解决方案

解决方案1 1 2019-08-25 16:38:58

解决方案2 0 2019-08-25 16:15:58

解决方案1
1 2019-08-25 16:38:58

解决方案2
0 2019-08-25 16:15:58