62

そのため、私はコードを書くのが初めてで (約数週間)、自分の Web サイトのコードを書いているときに壁にぶつかりました。次のようなレイアウトにしたいです。

画像 しかし、2 つのボックスを並べて配置する方法がわかりません。1 つのボックスは私のウェブサイトを説明するビデオで、もう 1 つのボックスはサインアップ登録フォームです。ボックス同士を 1 インチほど離して隣り合わせに配置したいと思います。

Web サイトのヘッダーの幅についても助けが必要です。現在、ヘッダーがページに収まらず、横スクロールが発生しているようです。このような種類：

画像 Web サイト全体が 1 つの大きな箱のようになり、すべてのコンテンツがその箱の中に収まるようにしたいのです。誰か助けてくれませんか？とても有難い。前もって感謝します。

4

8 に答える 8

73

http://jsfiddle.net/kkobold/qMQL5/

#header {
    width: 100%;
    background-color: red;
    height: 30px;
}

#container {
    width: 300px;
    background-color: #ffcc33;
    margin: auto;
}
#first {
    width: 100px;
    float: left;
    height: 300px;
        background-color: blue;
}
#second {
    width: 200px;
    float: left;
    height: 300px;
    background-color: green;
}
#clear {
    clear: both;
}
<div id="header"></div>
<div id="container">
    <div id="first"></div>
    <div id="second"></div>
    <div id="clear"></div>
</div>

于 2013-03-13T00:40:18.093 に答える
45

これはうまくいきます

<div style="width:800px;">
  <div style="width:300px; float:left;"></div>
  <div style="width:300px; float:right;"></div>
</div>
<div style="clear: both;"></div>
于 2013-03-13T00:39:25.023 に答える
3

これは、提供されたワイヤーフレームの単純な (レスポンシブではない) HTML/CSS 翻訳です。

ここに画像の説明を入力

HTML

<div class="container">

  <header>
    <div class="logo">Logo</div>
    <div class="menu">Email/Password</div>
  </header>

  <div class="first-box">
    <p>Video Explaning Site</p>
  </div>

  <div class="second-box">
    <p>Sign up Info</p>
  </div>

  <footer>
    <div>Website Info</div>
  </footer>

</div>

CSS

.container {
  width:900px; 
  height: 150px;
}

header {
  width:900px; 
  float:left; 
  background: pink; 
  height: 50px;
}

.logo {
  float: left;
  padding: 15px
}

.menu {
  float: right;
  padding: 15px
}

.first-box {
  width:300px; 
  float:left; 
  background: green; 
  height: 150px;
  margin: 50px
}

.first-box p {
  color: #ffffff;
  padding-left: 80px;
  padding-top: 50px;
}

.second-box {
  width:300px; 
  height: 150px; 
  float:right; 
  background: blue;
  margin: 50px
}

.second-box p {
  color: #ffffff;
  padding-left: 110px;
  padding-top: 50px;
}

footer {
  width:900px; 
  float:left; 
  background: black; 
  height: 50px;
  color: #ffffff;
}

footer div {
  padding: 15px;
}
于 2018-11-06T12:39:14.210 に答える
1

Web サイトの幅に関しては、ラッパー クラスを使用してコンテンツを囲むことを検討する必要があります (これは、要素の幅を制限し、コンテンツを超えて拡張するのを防ぐのに役立ちます)。

<style>
.wrapper {
  width: 980px;
}
</style>

<body>
  <div class="wrapper">
    //everything else
  </div>
</body>

コンテンツボックスに関する限り、使用することをお勧めします

<style>
.boxes {
  display: inline-block;
  width: 360px;
  height: 360px;
}
#leftBox {
  float: left;
}
#rightBox {
  float: right;
}
</style>

ボックス オブジェクト モデルとすべての「表示」プロパティの調査に時間を費やします。彼らは永遠に役に立ちます。特に「インラインブロック」には細心の注意を払っており、ほぼ毎日使用しています。

于 2013-03-13T02:51:14.880 に答える
1

CSS と HTML を詳しく調べれば、これがわかります。ボックスを左右に浮かせるだけで、それらのボックスは同じdiv内にある必要があります。http://www.w3schools.com/html/html_layout.aspは良いリソースかもしれません。

于 2013-03-13T00:38:36.310 に答える