并排对齐两个 div

发布于 2024-08-30 04:47:35 字数 486 浏览 6 评论 0原文

我有一个小问题。我正在尝试使用 CSS 并排对齐两个 div，但是，我希望将中心 div 水平放置在页面中央，我通过使用实现了这一点：

#page-wrap { margin 0 auto; }

效果很好。我想将第二个 div 放置在中央换行的左侧，但我无法使用浮动来做到这一点，尽管我确信这是可能的。

我想将红色 div 推到白色 div 旁边。

这是我当前关于这两个 div 的 CSS，侧边栏是红色 div，换行是白色 div：

#sidebar {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap {
    margin: 0 auto;
    width: 600px;
    background: #ffffff;
    height: 400px;
}

原文

I have a small problem. I am trying to align two divs side by side using CSS, however, I would like the center div to be positioned horizontally central in the page, I achieved this by using:

#page-wrap { margin 0 auto; }

That's worked fine. The second div I would like positioned to the left side of the central page wrap but I can't manage to do this using floats although I'm sure it is possible.

I would like to push the red div up alongside the white div.

Here is my current CSS concerning these two divs, sidebar being the red div and page-wrap being the white div:

#sidebar {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap {
    margin: 0 auto;
    width: 600px;
    background: #ffffff;
    height: 400px;
}

分享到QQ

分享到微博

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

发布评论

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

梦里南柯 2024-09-06 04:47:35

如果你包装你的 div，像这样：

<div id="main">
  <div id="sidebar"></div>
  <div id="page-wrap"></div>
</div>

你可以使用这个样式：

#main { 
    width: 800px;
    margin: 0 auto;
}
#sidebar    {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin-left: 200px;
}

不过，这是一个稍微不同的外观，所以我不确定这是否是你想要的。这会将所有 800px 作为一个单位居中，而不是将 600px 与左侧的 200px 居中。基本方法是你的侧边栏向左浮动，但在主 div 内部，并且 #page-wrap 具有侧边栏的宽度，因为它的左边距可以移动那么远。

根据评论进行更新：对于这种偏心的外观，您可以执行以下操作：

<div id="page-wrap">
  <div id="sidebar"></div>
</div>

使用以下样式：

#sidebar    {
    position: absolute;
    left: -200px;
    width: 200px;
    height: 400px;
    background: red;    
}

#page-wrap  {
    position: relative;
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin: 0 auto;
}

If you wrapped your divs, like this:

<div id="main">
  <div id="sidebar"></div>
  <div id="page-wrap"></div>
</div>

You could use this styling:

#main { 
    width: 800px;
    margin: 0 auto;
}
#sidebar    {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin-left: 200px;
}

This is a slightly different look though, so I'm not sure it's what you're after. This would center all 800px as a unit, not the 600px centered with the 200px on the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wrap has the width of your sidebar as it's left margin to move that far over.

Update based on comments: For this off-centered look, you can do this:

<div id="page-wrap">
  <div id="sidebar"></div>
</div>

With this styling:

#sidebar    {
    position: absolute;
    left: -200px;
    width: 200px;
    height: 400px;
    background: red;    
}

#page-wrap  {
    position: relative;
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin: 0 auto;
}

回复收藏 0 原文

长发绾君心 2024-09-06 04:47:35

我不明白为什么 Nick 使用 margin-left: 200px; 而不是将另一个 div 浮动到 left 或 right，我刚刚调整了他的标记，您可以对两个元素使用 float 而不是使用 margin-left。

演示

#main {
    margin: auto;
    width: 400px;
}

#sidebar    {
    width: 100px;
    min-height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 300px;
    background: #0f0;
    min-height: 400px;
    float: left;
}

.clear:after {
    clear: both;
    display: table;
    content: "";
}

另外，我使用了正在调用的 .clear:after父元素，只是为了自我清除父元素。

I don't understand why Nick is using margin-left: 200px; instead off floating the other div to the left or right, I've just tweaked his markup, you can use float for both elements instead of using margin-left.

Demo

#main {
    margin: auto;
    width: 400px;
}

#sidebar    {
    width: 100px;
    min-height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 300px;
    background: #0f0;
    min-height: 400px;
    float: left;
}

.clear:after {
    clear: both;
    display: table;
    content: "";
}

Also, I've used .clear:after which am calling on the parent element, just to self clear the parent.

回复收藏 0 原文

羞稚 2024-09-06 04:47:35

这可以通过样式属性来完成。

<!DOCTYPE html>
<html>
<head>
<style> 
#main {

  display: flex;
}

#main div {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">Red DIV</div>
  <div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>

</body>
</html>

其结果将是：

在此处输入图像描述

享受...
请注意：这适用于更高版本的 CSS (>3.0)。

This Can be Done by Style Property.

<!DOCTYPE html>
<html>
<head>
<style> 
#main {

  display: flex;
}

#main div {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">Red DIV</div>
  <div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>

</body>
</html>

Its Result will be :

enter image description here

Enjoy...
Please Note: This works in Higher version of CSS (>3.0).

回复收藏 0 原文

被你宠の有点坏 2024-09-06 04:47:35

HTML 代码用于三个 div 并排对齐，也可以通过一些更改用于两个 div

<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>

CSS 将是

#wrapper {
  display:table;
  width:100%;
}
#row {
  display:table-row;
}
#first {
  display:table-cell;
  background-color:red;
  width:33%;
}
#second {
  display:table-cell;
  background-color:blue;
  width:33%;
}
#third {
  display:table-cell;
  background-color:#bada55;
  width:34%;
}

此代码将针对响应式布局进行工作，因为它将

<div>

根据设备宽度调整大小。
一个人可以让任何人保持沉默

<div>

即使

<!--<div id="third">third</div> -->

，也可以使用两个人

<div>

并排休息。

The HTML code is for three div align side by side and can be used for two also by some changes

<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>

The CSS will be

#wrapper {
  display:table;
  width:100%;
}
#row {
  display:table-row;
}
#first {
  display:table-cell;
  background-color:red;
  width:33%;
}
#second {
  display:table-cell;
  background-color:blue;
  width:33%;
}
#third {
  display:table-cell;
  background-color:#bada55;
  width:34%;
}

This code will workup towards responsive layout as it will resize the

<div>

according to device width.
Even one can silent anyone

<div>

<!--<div id="third">third</div> -->

and can use rest two for two

<div>

side by side.

回复收藏 0 原文

帅气尐潴 2024-09-06 04:47:35

也可以在没有包装器的情况下执行此操作 - div#main。您可以使用 margin: 0 auto; 将#page-wrap 居中;方法，然后使用 left:-n;方法来定位#sidebar并添加#page-wrap的宽度。

body { background: black; }
#sidebar    {
    position: absolute;
    left: 50%;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -230px;
    }

#page-wrap  {
    width: 60px;
    background: #fff;
    height: 400px;
    margin: 0 auto;
    }

但是，如果窗口小于内容，侧边栏将消失在浏览器视口之外。

尼克的第二个答案是最好的，因为它也更易于维护，因为如果您想调整#page-wrap 的大小，则不必调整#sidebar。

It's also possible to to do this without the wrapper - div#main. You can center the #page-wrap using the margin: 0 auto; method and then use the left:-n; method to position the #sidebar and adding the width of #page-wrap.

body { background: black; }
#sidebar    {
    position: absolute;
    left: 50%;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -230px;
    }

#page-wrap  {
    width: 60px;
    background: #fff;
    height: 400px;
    margin: 0 auto;
    }

However, the sidebar would disappear beyond the browser viewport if the window was smaller than the content.

Nick's second answer is best though, because it's also more maintainable as you don't have to adjust #sidebar if you want to resize #page-wrap.

回复收藏 0 原文

红焚 2024-09-06 04:47:35

最简单的方法是将它们包装在 container div 中，并将 margin: 0 auto; 应用于容器。这将使 #page-wrap 和 #sidebar div 在页面上居中。但是，如果您想要偏离中心的外观，则可以将 container 200px 向左移动，以考虑 #sidebar 的宽度代码>分区。