CSS：如何实现 - 两个元素在没有第三个父容器的情况下并排居中和定位？

发布于 2024-10-22 17:30:54 字数 261 浏览 7 评论 0原文

问题：在以下 HTML 标记中：

<html>
  <body>
    <div id="div_1"></div>
    <div id="div_2"></div>
  </body>
</html>

我希望两个 div（可以是任何其他标签）居中并并排放置。如何使用 CSS 实现这一点，而不添加第三个父容器？

原文

Problem: In the following HTML-markup:

<html>
  <body>
    <div id="div_1"></div>
    <div id="div_2"></div>
  </body>
</html>

I want both div's (this can be any other tag) to be centered AND positioned side-by-side. How to achieve this with CSS, without adding a third parent container?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空‖城人不在 2024-10-29 17:30:54

此处演示： http://jsfiddle.net/Shehi/6RqWb/

以下 CSS 规则可以解决问题：

#div_1
{
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
    left: 50%;
    margin-left: -200px; /* = -1 * the width of element */
    float: left;
    clear: none;
}

#div_2
{
    width: 200px;
    height: 200px;
    background-color: blue;
    position: relative;
    right: 50%;
    margin-right: -200px; /* = -1 * the width of element */
    float: right;
    clear: none;
}

Demo here: http://jsfiddle.net/Shehi/6RqWb/

Following CSS rules solve the problem:

#div_1
{
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
    left: 50%;
    margin-left: -200px; /* = -1 * the width of element */
    float: left;
    clear: none;
}

#div_2
{
    width: 200px;
    height: 200px;
    background-color: blue;
    position: relative;
    right: 50%;
    margin-right: -200px; /* = -1 * the width of element */
    float: right;
    clear: none;
}

回复收藏 0 原文

~没有更多了~