水平对齐div与固定的图像大小。 （水平滚动条可能会来）

Question

我有两个div。它包含两个图表，宽度为800px，高度为400px。我希望它们水平对齐。

此外，如果监视器/浏览器大小发生变化，他们不应该更改对齐或图像大小。应该会出现自动水平滚动条（或垂直方向）。

我尝试了很多选择，但无法获得我想要的东西。 ：（

./node_modules/.bin

这是我试过的CSS的最新版本。

Answer 1

display:flex和margin会在这里解决问题。如果不想更改图片大小，请删除width:50%;。

检查以下内容：此处我更改图像尺寸以便正确显示。

#container {
    display: flex;
    font-size: 28px;
    height: 100%;
    text-align: center;
    width: 100%;
}
#container > div {
    margin: 0 5px;
}
    
img{
      width:400px;
      height:200px;
}

<div id="container">
<div id="left"><img src="http://placehold.it/100x100" /></div>
<div id="right"><img src="http://placehold.it/100x100" /></div>
</div>

<强> Working Fiddle

Answer 2

据我了解，这应该满足您的需求。这是一个working example in JSFiddle。我已经在CSS中添加了注释来描述我是如何使用它的。

#container{
    /* Since you know the width of the images, we can set
    the container width. This will force the browser to
    draw a horizontal scrollbar when the width is too small */
    width: 1600px;
    /* This is a little trick to make the container as large
    as the elements inside it, even though they are set to
    float: left */
    overflow: hidden;
}
#left,
#right{
    /* display: inline-block does not work because is adds space
    around each element, making them wider than the container and
    forcing the second image down below the first, so we can use
    float: left instead */
    float: left;
    width: 50%;
}

<div id="container">
    <div id="left"><img src="http://placehold.it/800x400" /></div>
    <div id="right"><img src="http://placehold.it/800x400/444444" /></div>
</div>  

Answer 3

如果你能告诉我们你尝试过的东西会很棒。无论如何，我希望这是你所期待的。 demo here

         <div class="row">
            <div class="container">
                   <div id="1" class="box left">
                     <img src="http://placehold.it/100x100" height="800" width="400">
                   </div>
                  <div id="1" class="box right">
                     <img src="http://placehold.it/100x100" height="800" width="400">

          </div>
        </div>
     </div>

Answer 4

显示内联块将起作用，这是一个示例：https://jsfiddle.net/w913sbro/

您也可以尝试将此添加到#container：

display:flex;

默认情况下，flex将以行样式对齐。（水平）。