获得两张并排显示的图像

时间:2015-03-04 21:08:08

标签: html css twitter-bootstrap

对于我的导航,我使用上一个/下一个按钮。出于原因,这些是图像,其CSS设置其背景图像/高度等。我在我的网站上使用这些,并且在对齐中心时它们完美地工作。

现在我有这两张图片,但我需要它们并排显示! (两者之间有一些间距,整个shebang以页面为中心)

我试过搞乱,但无论我做什么使图像看起来搞砸了(例如:尝试使用自举列),或者不能并排获取它们(例如:传统的内联或其他)。我可以将它们包装在几个div中以使其工作,但不能改变图像的本质。

JSFiddle:https://jsfiddle.net/wgrLfxg3/1/

HTML

<div class="container-fluid">
  <div class="row">
    <img class="the-button center-block" />
    <img class="the-button center-block" />
  </div>
</div>

CSS

.the-button {
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100%;

    background-image: url(http://placehold.it/122x42);
    width: 122px;
    padding-left: 122px;
    height: 42px;

    margin-bottom: 1em;
}

4 个答案:

答案 0 :(得分:2)

使用:

display: inline-block;

应该工作。

这是小提琴。 https://jsfiddle.net/plushyObject/wgrLfxg3/2/

答案 1 :(得分:1)

<div class="container-fluid">
  <div class="row">
      <table>
       <tr> 
           <td><img class="the-button center-block" /></td>
           <td><img class="the-button center-block" /></td>
        </tr>
      </table>
   </div>
</div>

尝试将它们包装到表格中。这可能只是解决您的问题。
通过这种方式修改间距也很容易 https://jsfiddle.net/wgrLfxg3/1/

答案 2 :(得分:1)

你需要编辑填充以使其增加边距:0 auto;并且并排显示它们只显示内联块。

以下是并排修复的代码:

.the-button {
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url(http://placehold.it/122x42);
    width: 122px;    
    height: 42px;    
    margin-bottom: 1em;  
}

查看此处的示例

https://jsfiddle.net/wgrLfxg3/3/

你是否也需要将按钮置于其他div的中心位置?

答案 3 :(得分:0)

我所知道的最简单方法是使用JavaScript在透明画布上绘制图像。所以,这样做,你将能够看到它下面的东西,你将能够调整它们的大小,它们之间的空间,它们的位置等等。

请参阅以下链接:

W3

html5canvastutorials

canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 480;
document.body.appendChild(canvas);

ctx.fillStyle = 'lightgray';
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = 'gray';
ctx.fillRect(5, 5, 310, 470);
ctx.fillRect(320, 5,315, 470);

https://jsfiddle.net/v4errq9r/

它使用矩形而不是图像,但我认为它可以通过矩形。