css - 我如何让我的 div 并排放置

Question

我似乎无法让我的导航 div（位于左侧）直接坐在我的内容 div（位于右侧）旁边。

他们都坐在包装器div中。我已经在 CSS 的外部样式表上完成了这项工作。

Answer 1

这是你可以尝试的：

<style>
    #div1, #div2 {
        display: inline-block;
    }
</style>

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

Answer 2

您可以使用浮点数或将其“显示”属性更改为“内联块”。有时第二个选项更适合你，所以你不会弄乱浮点数（因为看起来你只是从 CSS 开始）。

此外，如果您与我们分享您的代码或网站链接，我们可以更轻松地为您提供帮助。如果你不这样做，我们在这里试图帮助你（包括我）是盲目的。

Answer 3

使用浮动。看看这里 http://www.w3schools.com/css/css_float.asp

记住使用

清除

当你使用浮动。

Answer 4

1. 您可以将它们都浮动，最好按px百分比或百分比指定它们的宽度。像这样：

   div1{ 浮动：左；宽度：200px；} div2{ 浮动：左；宽度：600px；}

2. 您可以只浮动一个，并使用margin属性正确放置第二个 div。

3. 你也可以申请display: absolute两个 div 来得到你想要的。

4. 更好的是，您可以使用诸如引导程序之类的东西通过网格布局来帮助您做到这一点。它可以非常方便。不过，我认为了解基本css知识是件好事。

---

如果您希望布局流畅，请不要使用 3 或 2。

编辑：

一点建议：我认为您可以找到一个接近您想要的网页（有很多）并阅读相关的 css 代码，一路查找所有 css 属性。

Answer 5

您可以为此使用浮点数，请明智地使用浮点数。

代码可以如下所述

<div class="wrapper">
<div class="right">Right</div>
<div class="left">left</div>
<div class="clearfloat"></div> <!--To romove floats-->
</div>​

.wrapper{
width:500px;
height:100px;
color:#FFF;
}
.right{
width:30%;
background-color:red;
float:left;
}

.left{
width:70%;
background-color:blue;
float:left;
}

.clearfloat{
clear:both
}

​</p>

http://jsfiddle.net/PJhst/1/

Answer 6

这里的几个例子让我想哭。

对于初学者，不要使用inline-block这将导致各种跨浏览器的宽度计算困难。浮动列绝对是最好的方法。

您的标记可以像这样简单地完成。

HTML

<!-- Container div that will prevent the child divs from breaking the layout 
of the page for content below-->
<div class="container">
    <div class="clmn">
    <!-- First column -->
    </div>
    <div class="clmn">
    <!-- Second column -->
    </div>
</div>

CSS

/**
 * Columns
 * 1. The column is floated left which pushes the div as far left as it can 
      possibly go within it's parent container.
 * 2. The width of the container is set at less than 50% so that you can leave 
      a gap between the columns.
 */

.clmn{
    float:left; /* 1 */
    width:49%; /* 2 */
}

/**
 * 1. The selector identifies any container with the class `.clmn` which has 
      another column before it. A margin is added to that to create the space. 
      This is calculated at 100% - (2 * 49% )
 */

.clmn + .clmn{
    margin-left:2%; /* 1 */
}

/* Clearfix to contain floats. 
  See http://nicolasgallagher.com/micro-clearfix-hack/ 
 */

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.container:before,
.container:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.container:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.container {
    *zoom: 1;
}

该方法的美妙之处在于您可以对其进行扩展以轻松处理不同宽度的列。我在工作中一直使用更完整的系统，并在网格系统中开源了该方法。这里