html - 以一定的间隙响应地居中两个元素

Question

对于我正在创建的特定布局，我需要将两个元素在 div 中水平居中，就好像它们是单个元素一样，如图所示。

http://imgur.com/k1ZIPrU

在这两者之间，我还需要有一个间隙(如上所示)，即使浏览器窗口宽度发生变化也能保持确定。

使用 css 执行此操作的最佳方法是什么？

我尝试在 div 中执行此操作，但无法响应地使元素之间的间隙相同。

我也在网上做了一些调查，但没有成功。

如有任何帮助，我们将不胜感激。

Answer 1

好了，如果您有任何问题，请告诉我。

.wrapper {
    background-color: grey;
    border: 1px solid black;
    padding: 5px;
}
.left {
    float: left;
    width: 170px;
    margin: 10px;
    box-sizing: border-box;
    display: table-cell;
}
.right {
    box-sizing: border-box;
    display: table-cell;
}
.left img {
    width: 150px;
    max-width: 150px;
}

<div class="wrapper">
    <div class="left">
        <img src="http://bigcatrescue.org/wp-content/uploads/2011/05/tigersnikita.jpg" alt="Tiger image" />
    </div>
    <div class="right">
        <h1>Get to know us a little better!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet libero at odio tristique elementum non a sem. Proin dui nulla, cursus sed purus ac, consectetur ultricies purus. Vivamus turpis lectus, dapibus sit amet vulputate dictum, commodo at metus. Integer ornare vehicula velit, ac feugiat enim egestas vitae. Nam a ornare leo. Curabitur hendrerit neque lorem, a aliquam nisi rhoncus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper augue quis eros ultrices sagittis. Vestibulum dapibus dapibus efficitur.</p>        
    </div>
</div>