Question

如何在这个特定的html示例中并排显示2张图片？

这是我的fiddle

我想要的是在html中并排对齐图片，对于上面的var app = angular.module('jobs',['ngRoute']) app.config(function($routeProvider) { $routeProvider .when('/', { templateUrl: 'home.html', controller: 'JobsController' }) }) app.controller('JobsController', function($scope, $stateParams, posts){ });标记和图片下方的h1标记也是如此。

我想要的插图：

这是我想要fiddle的示例，但是当我想在上面添加title0------------title1 pic0--------------pic1 word0-------------word1 ^^^^^^^^^^^^^^^^^^^^^^^^^标记并在图片下方添加h1标记时，它不起作用。但是，我喜欢p可以控制照片之间横向距离的方式。

Here是一个类似的问题，但略有不同。

EDIT1 ，这是下面提到的bootstrap版本

EDIT2 以下是其他解决方案

Amitesh Kumar - https://jsfiddle.net/HattrickNZ/ko1qsbom/9/
你好 - https://jsfiddle.net/ThetHlaing10/ko1qsbom/2/
Michael_B - https://jsfiddle.net/HattrickNZ/ko1qsbom/8/
BTruong - https://jsfiddle.net/ko1qsbom/6/

他们都提供了一个解决方案，但我认为引导版本是最好的，因为它在屏幕宽度调整大小时处理最好.tks

Answer 1

您可以使用display:inline-block;将元素设置为仅使用它们具有的宽度。通常，h1或div是display:block;元素。

以下是How do I bind an ArrayList to a PreparedStatement in Oracle?。

Answer 2

使用flexbox，并排定位简单易行。

以下是您所需要的：

＆＃13;

#container {
    display: flex;
    text-align: center;  /* optional */
}

＆＃13;

<div id="container">

    <section>
        <h1 class="left">title0 </h1>
        <img class="left" src="img_tree.png" alt="pic0" style="width:304px;height:228px;">
        <p class="left"><a>word0</a></p>
    </section>

    <section>
        <h1 class="right">title1 </h1>
        <img class="right" src="img_tree.png" alt="pic1" style="width:304px;height:228px;">
        <p class="right"><a>word0</a></p>
    </section>

</div>

＆＃13;

有多种选项可以对齐行中的两个部分（中心，空格，柔性开始等）。有关详细信息，请参阅此处：https://stackoverflow.com/a/33856609/3597276

点击此处了解有关flexbox的更多信息：A Complete Guide to Flexbox

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布CSS：Autoprefixer。

Answer 3

你可以做的是将title0，pic0和word0放在div中并向div添加一个类，这样你就可以使用css将它浮动到左边。另一方面，你有一个div中的title1，pic1和word1，它有一个将它浮动到右边的类。

这是浮动的工作：

.leftBlock {
     float: left;
}

.rightBlock {
     float: right;
}

查看这个jsfiddle：https://jsfiddle.net/ko1qsbom/6/

有关花车的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/float

Answer 4

尝试这样，让他们知道总宽度应该小于100％和float:left

<强> HTML

<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>

<!--<h1 class="left">title0 </h1> --> 
<img class = "left" src="img_tree.png" alt="pic0" style="width:304px;height:228px;">
<!-- <p class="left"><a>word0</a></p> -->


<!-- <h1 class="right">title1 </h1> --> 
<img class = "right" src="img_tree.png"  alt="pic1" style="width:304px;height:228px;">
<!-- <p class="right"><a>word0</a></p> -->

<强> CSS

/*
img.right{
float: left;
margin-right: 300px;
}
*/
h1.left p1.left {
text-align: left;
float:left
}

h1.right p1.right{
text-align: right;
}
.div1 {
  width:40%;
   float: left;
}
.div2 {
  width:40%;
  float: left;
}

您也可以使用display:inline-block;

如何将2张图片并排显示是这个html示例？

4 个答案: