1

1 つの div 要素内に 2 つの div 要素があります。これら 2 つの div 要素は両方とも幅が 50% で、もう 1 つは左に、もう 1 つは右に浮いています。右側のフローティング div には 1 つの高い画像 (異なる高さ) が含まれ、左側のフローティング div にはテキストが含まれます。左の div では、これらのテキストが 3 つの異なるサイズの行に分割され、左の div 全体が右の div と同じ高さになる必要があります。CSSのみを使用してこれを行うにはどうすればよいですか? これが私のコード例です：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
    margin: 0;
}
.container {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FF0;
}
.left {
    float: left;
    width: 50%;
    background: #F0F;
}
.left .first {
    height: 20%;
}
.left .second {
    height: 50%;
}
.left .third {
    height: 30%;
}
.right {
    float: right;
    width: 50%;
}
.right img {
    display: block;
    max-width: 100%;
}
p {
    margin: 0;
}
</style>
</head>
<body>          
    <div class="container">
        <div class="left">
            <div class="first">
                <p>First</p>
            </div>
            <div class="second">
                <p>Second</p>
            </div>
            <div class="third">
                <p>Third</p>
            </div>
        </div>
        <div class="right">
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
        </div>
    </div>
</body>
</html>
4

2 に答える 2

0

あなたがする必要があるいくつかのことがあります：

floatコンテナが必要です。

追加のコンテナーを追加し、次の順序で div をネストする必要があります。

<div class="container2">
  <div class="container">
    <div class="left">
      <div class="first">
        <p>First</p>
      </div>
      <div class="second">
        <p>Second</p>
      </div>
      <div class="third">
        <p>Third</p>
      </div>
    </div>
    <div class="right">
      <img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
    </div>
  </div>
</div>

次にrelative、コンテナを配置して右に移動する必要があります。その後、コンテンツ div を左から移動します。

CSS の場合:

.container {
  width: 100%;
  float: left;
  position: relative;
  right: 50%;
}
.container2 {
  width: 100%;
  float: left;
  overflow:hidden;
  position:relative;
}
.left {
  float: left;
  width: 50%;
  left: 50%;
  position: relative;
  background: #F0F;
}
.right {
  float: left;
  width: 50%;
  left: 50%;
  position: relative;
}

お困りの方はこちらのページをご覧ください。

于 2012-02-23T14:15:34.857 に答える