0

私はコードに慣れていないので、div ボックスが正確に「異なる」かどうかはわかりませんが、1 つはこれから書き込むプレーン テキストだけのボックスで、もう 1 つはフォーム ボックスです (既に設定しています)。アップとすべて) 人々がサインアップするため。

私の唯一の問題は、2 つの異なる div ボックスを並べて配置する方法がわからないことです。これが私のページの現在の外観ですhttp://www5.picturepush.com/photo/a/12472673/640/12472673.png ご覧の とおり、上部がうまく整列していません。float プロパティを使用したため、正しく整列しませんでした

ただし、境界線の上から完全に揃えて、真ん中の 2 つを少し離したいです。こんな感じhttp://www1.picturepush.com/photo/a/12472719/640/12472719.png

それを行う最良の方法は何ですか？ご協力ありがとうございました。

4

7 に答える 7

1

ここでこれを試してください。ライブコードが希望どおりに機能していることを確認できるjsfiddleへのリンクを提供します。

http://jsfiddle.net/9kNDe/

    <div class="big_box">
       <div class="box">do some in here</div>
       <div class="box"> do some in here</div>
       <div class="clear"></div>
    </div>

    <style>
    .big_box {
   width: 500px;
   text-align: center;
    margin: 0 auto;
}
.box { width: 200px; float: left; border: 1px solid #000; margin: 3px; }
.clear { clear: both }
    </style>
于 2013-03-21T19:02:57.953 に答える
1 
<style>
.holder 
{
    clear:both;
}
.holder div
{
    width:100px;
    height:100px;
    float:left;
    border:1px solid #333;
    background-color:#ccc;
}
.holder .right
{
    margin-left:20px;
    border:1px solid #000;
    background-color:#333;
    }
</style>

<div class="holder">
    <div class="left"></div>
    <div class="right"></div>
</div>

http://jsfiddle.net/Y8kRx/

于 2013-03-21T19:04:44.970 に答える
1

プロパティを使用しfloatます。

.left { float: left; }

http://www.w3schools.com/cssref/pr_class_float.asp

于 2013-03-21T19:00:39.720 に答える
0

display: inline-blockプロパティを使用することもできます

于 2013-03-21T19:01:06.030 に答える
0 
<style type="text/css">
.container { width:500px; }
.l { width:200px; }
.r { width:200px; float: right; }
</style>

<div class="container">
  <div class="l">123</div>
  <div class="r">123</div>
</div>
于 2013-03-21T19:02:58.883 に答える
0

CSSを使用して、コンテンツに関係なく同じ高さdisplay: tableのボックスを取得できます（このレイアウトを取得するためにHTMLテーブルに依存することなく、これは理由のある不十分なコーディングと見なされます）。

これがデモです：http：//jsfiddle.net/gtXv5/1/

HTML：

<div class="row">
    <div class="col box">same<br>height<br>as the<br>other<br>.box<br>whatever<br>the<br>content.<br></div>
    <div class="col gutter"><!-- empty "cell" --></div>
    <div class="col box">content lorem ipsum</div>
</div>

CSS：

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.row {
    display: table;
    table-layout: fixed;
    width: 500px;
    margin: 0 auto;
}

.col {
    display: table-cell;
}
.box {
    width: 200px;
    border: 1px solid #777;
    padding: 15px;
    text-align: center;
    color: #222;
    background-color: lightblue;
}
.gutter {
    width: 100px;
    background: transparent;
}
于 2013-03-21T19:50:07.237 に答える
0

そのdisplay: inline-block物件はきっとあなたが探しているものです。

実施例

HTML

<div id="box1"></div>
<div id="box2"></div>

CSS

#box1, #box2 {
    width: 200px;
    height: 100px;
    position: relative;
    display: inline-block;
}

#box1 {
    background: #00FFFF;
}

#box2 {
    background: #FF00FF;
}
于 2013-03-21T19:03:05.190 に答える