-1

ナビゲーション div (左側) をコンテンツ div (右側) のすぐ隣に配置できないようです。

どちらもラッパー div に配置されます。CSSの外部スタイルシートでこれを行いました。

4

6 に答える 6

4

これはあなたが試すことができるものです：

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

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
</div>
于 2012-12-04T11:14:53.587 に答える
2

float を使用するか、その「display」プロパティを「inline-block」に変更できます。場合によっては、2 番目のオプションの方が適している場合もあります。したがって、float をいじる必要はありません (CSS だけから始めているように見えるため)。

また、あなたのコードやウェブサイトのリンクを私たちと共有していただけると、私たちがあなたを支援するのがずっと簡単になります. そうしないと、私たちはあなたを助けようとして盲目になります（私を含む）。

于 2012-12-04T11:10:42.697 に答える
1

フローティングを使用します。ここを見て ください http://www.w3schools.com/css/css_float.asp

使用することを覚えておいてください

クリア

フロートを使用する場合。

于 2012-12-04T11:08:44.833 に答える
0

これには 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
}

</p>

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

于 2012-12-04T11:33:32.157 に答える
0

  1. 両方ともフロートできますが、幅はpxパーセンテージまたはパーセンテージで指定することをお勧めします。このような：

    div1{ float: 左; 幅: 200px; } div2{ float: 左; 幅: 600px; }

  2. 1つだけフロートし、marginプロパティを使用して2番目のdivを適切に配置できます。

  3. display: absolute両方の div に適用して、必要なものを取得することもできます。

  4. さらに良いことに、ブートストラップのようなものを使用して、グリッド レイアウトでこれを行うことができます。とても便利です。cssとはいえ、基礎知識は知っておくと良いと思います。

レイアウトを流動的にしたい場合は、3 または 2 を使用しないでください。

編集：

ちょっとしたアドバイス: あなたが望むものに近い (たくさんある) Web ページを見つけて、それに関連する css コードを読み、途中ですべての css プロパティを調べることができると思います。

于 2012-12-04T11:22:50.973 に答える
0

ここにある例のいくつかは、私が泣きたくなるようなものです。

まず、使用しないでください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;
}

このメソッドの優れた点は、さまざまな幅の列を簡単に処理できるように拡張できることです。私は仕事で常により完全なシステムを使用しており、グリッド システムでアプローチをオープンソース化しています。ここ

于 2012-12-04T12:13:55.957 に答える