Question

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

http://imgur.com/k1ZIPrU

在这两者之间，我还需要有一个间隙（如上所示），即使浏览器窗口宽度发生变化也是如此。

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

我尝试在div中执行此浮动，但无法使响应之间的元素之间的差距变得相同。

我也在网上做了一些研究，但徒劳无功。

任何帮助将不胜感激。

Answer 1

如果您有任何疑问，请告诉我。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

以一定间隙响应地对准两个元素

1 个答案: