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

请记住使用

明确

当你使用float时。

Answer 4

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

DIV1 { 向左飘浮; 宽度：200px; } DIV2 { 向左飘浮; 宽度：600px; }
您可以只浮动一个，并使用margin属性放置第二个 div正确。
您也可以将display: absolute应用于两个div以获得您想要的内容。
更好的是，您可以使用类似bootstrap的内容来帮助您完成此操作按网格布局。它可以非常方便。不过，我认为了解基本的css知识是件好事。

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

修改：

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

Answer 5

你可以使用float，请明智地使用float。

代码可以如下所述

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

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

该方法的优点在于您可以扩展它以轻松处理不同宽度的列。我在工作中一直使用更完整的系统，并在网格系统中开源。 here

我怎样才能让我的divs并存

6 个答案: