2

どこが悪いのかわからない問題に遭遇しました。私のコードはここにあります：

<html>
<head>
<style type="text/css">
 #top{
  width:100%;
  height: 78%;
  background-color: #ccc;
 }

 #left{
  width: 45%;
  height: 100%;
  display: inline-block;
  background-color: green;
 }
 #right{
  width:50%;
  height: 100%;
  display: inline-block;
  background-color: pink;}
 </style>
</head>
<body>
   <div id="top">
      <div id="left">
         <div id="inside">asd</div>
      </div>
     <div id="right"></div>
   </div>
</body>
</html>

「内側」の div に何も追加しない場合、レイアウトは次のように問題ありません。 ここに画像の説明を入力

しかし、「内部」devにタグまたはいくつかの単語を追加すると、レイアウトが間違ってしまいます。 ここに画像の説明を入力

私は HTML に慣れていないので、問題がわかりません。なぜこのようなことが起こるのか、誰が教えてくれますか? 私は気が狂ってしまいました!!!助けて~~~~:(

4

6 に答える 6

0

css に float 属性を追加することで、この問題を解決できます。

以下の更新された html テンプレートを見つけます

<html>
<head>
<style type="text/css">
 #top{
  width:100%;
  height: 78%;
  background-color: #ccc;
 }

 #left{
  width: 45%;
  height: 100%;
float: left;
  background-color: green;
 }
 #right{
  width: 50%;
  height: 100%;
float: left;
  background-color: pink;}
 </style>
</head>
<body>
   <div id="top">
      <div id="left">
         <div id="inside">test new</div>
      </div>
     <div id="right">test</div>
   </div>
</body>
</html>
于 2013-07-22T07:40:42.953 に答える
0

div のレイアウトには twitter ブートストラップをお勧めします。css シートの使用。

<div id=top class=row-fluid>
 <div id=right class=span6><div>
 <div id=left class=span6><div>
</div>

ブロックの配置は、インライン ブロックよりもはるかに簡単です。例に示すものを取得するために必要なのは、背景色を追加することだけです。また、フロートは扱いにくくなりやすいです。

于 2013-07-22T07:45:59.290 に答える
0

と に問題がblockありinlineます。テキストが表示されると、ブラウザは内部divを表示してスタイリングblockを台無しにします。inlineそれを回避するきちんとした方法があるかどうかはわかりませんinline-block-使用する必要がfloatあると思います。

floatマークアップに適用されるソリューションは次のとおりです。

<html>
<head>
<style type="text/css">
 #top {
    width:100%;
    height: 78%;
    background-color: #ccc;
 }

 #left {
    background:green;
    float:left;
    height:100%;
    width:45%;
 }

 #right {
    background:pink;
    height:100%;
    margin-left:45%;
    width:50%;
 }
 </style>
</head>
<body>
   <div id="top">
      <div id="left">
         <div id="inside">asdf</div>
      </div>

     <div id="right"></div>
   </div>
</body>
</html>

さらに、 CSS に注意してheightください。それは起こるのを待っている頭痛です。

于 2013-07-22T07:35:54.040 に答える