浮动 div 内的三个不同大小的行

发布于 2025-01-08 15:18:23 字数 1383 浏览 2 评论 0原文

我在一个 div 元素内有两个 div 元素。这两个 div 元素都是 50% 宽，另一个向左浮动，另一个向右浮动。右侧浮动 div 包含一张高图片（不同高度），左侧浮动 div 包含文本。在左侧 div，这些文本分为三个不同大小的行，整个左侧 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>

原文

I have two div elements inside one div element. These two div elements are both 50% wide and other one is floated to left and the other is floated to right. The right floated div contains one high picture (in different heights) and left floated div contains text. On the left div these texts are separated into three different sized rows and the whole left div should be as high as the right div. How am I able to do this using only CSS? Here's my example code:

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绿光 2025-01-15 15:18:23

简而言之，您可以有点这样做，但我认为它不会按照您期望的方式运行。

您必须为两个

声明明确的高度 -

.left, .right {
   height: 100px /*or whatever height you want*/;     
}

如果这是静态页面，并且图像永远不会改变，您可以手动输入像素量。

如果图片将要更改，并且您不知道高度是多少，您无法使用纯 CSS 使左侧 div 与右侧 div 的高度相匹配。

有多种方法可以伪造它（请参阅假列技术），但您无法以编程方式获得一个div 更改其高度以匹配另一个。

有很多方法可以用 JavaScript 来做到这一点，但我不打算深入讨论它们，因为你问到了 CSS（我讨厌使用 JS 来操作这样的布局 - 这是非常不可靠的）。

另外：如果您的包含 div、.container 崩溃了，那是因为您需要浮动它，或者应用清除修复技术。

The short answer is that you can kind of do this, but I don't think it will behave the way you expect.

You would have to declare explicit heights for the two <div>'s -

.left, .right {
   height: 100px /*or whatever height you want*/;     
}

If this is a static page, and the image never changes, you can manually enter the pixel amount.

If the picture is going to change, and you don't know what the height is going to be, you cannot get the left div to match the height of the right div using plain CSS.

There are ways to fake it (see the faux columns technique), but you cannot programmatically get one div to change it's height to match another one.

There are ways to do this with JavaScript, but I'm not going to get into them because you asked about CSS (and I hate using JS to manipulate layout like that - it's very unreliable).

Also: if your containing div, .container, collapses, it's because you need to either float it, or apply a clearfix technique.

回复收藏 0 原文

轻许诺言 2025-01-15 15:18:23

您需要做一些事情：

您需要浮动容器。

您需要添加一个额外的容器并按以下顺序嵌套 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>

然后您需要相对定位容器并将它们移动到右侧。之后，您将从左侧移动内容 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;
}

请参阅此页面，如果你有困难。

There are a few things you need to do:

You need to float the containers.

You need to add an extra container and nest the divs in the following order:

<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>

Then you need to relative position your containers and move them to the right. After that, you'll move your content divs from the left.

For your 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;
}

Please see this page if you're having difficulties.

回复收藏 0 原文

~没有更多了~