Question

我有一个带有一些文字的div，然后是文本下面的图像，每当你添加更多文字时，它就会出现在图像后面（我在jsfiddle中创建的基本示例我希望它能将图像向下推到远处因此你可以看到文本。但是我希望这两个框仍然是内联的，所以图像保持一致，理想情况下我不想只是改变div的高度，因为这个文本不断变化。

<div class="box one">
    <div>
        <h1>Some text 1</h1>
        <p>My paragraph of text is not going to be visible behind the car</p>
    </div>
    <a href="http://www.google.co.uk">
        <img src="http://www.wallpaperswala.com/wp-content/gallery/audi-r8-gt/audi-r8-gt-in-garage.jpg" height="80px" width="150px">
    </a>
</div>

<div class="box two">
    <div>
        <h1>Some text 2</h1>
        <p>My paragraph of text is not going to be visible behind the car again!</p>
    </div>
    <a href="http://www.google.co.uk">
        <img src="http://www.wallpaperswala.com/wp-content/gallery/audi-r8-gt/audi-r8-gt-in-garage.jpg" height="80px" width="150px">
    </a>
</div>

.box {
    color: #333333;
    font-size: 12px;
    height: 305px;
    padding: 10px 15px 0;
    width:150px;
}

.box div {
    color: #333333;
    font-size: 12px;
    height: 90px;
    padding: 10px 15px 0;
}

.two {
    float:right;
    margin-top:-310px;
}

Answer 1

删除height并放置min-height: 90px;

.box div {
color: #333333;
font-size: 12px;
padding: 10px 15px 0;
min-height: 90px;
}

http://jsfiddle.net/KApb6/10/

Answer 2

这种情况正在发生，因为您已将height:90px提交给.box div。

而不是height，请写下'min-height：90px'。

Here is the fiddle.

Answer 3

所以基本上你希望你的文字高度在所有盒子之间保持一致吗？这很难。

一种解决方案是将每个块放在一个容器中，如下所示：

<div class="header">
   <div class="one">Some text one</div>
   <div class="two">Some text two</div>
</div>
<div class="image">
   <div class="one"><img src="image-one.jpg"></div>
   <div class="two"><img src="image-two.jpg"></div>
</div>

或者类似于表格，但要检查所有样式和布局是非常困难的。

其他方式就是使用javascript设置高度，这样更容易。

Answer 4

Codepen

请参阅此代码以了解您想要的结果。

Answer 5

您可以将文字放在一个框中，将图像放在另一个框中。

<div class="clearfix">
    <div class="box one">
        <div>
        <h1>Some text 1</h1>
        <p>My paragraph of text is not going to be visible behind the car</p>
        </div>
    </div>

    <div class="box two">
        <div>
        <h1>Some text 2</h1>
        <p>My paragraph of text is not going to be visible behind the car again!</p>
        </div>
    </div>
</div>

<div class="clearfix">
    <div class="box one">
        <a href="http://www.google.co.uk">
        <img src="http://www.wallpaperswala.com/wp-content/gallery/audi-r8-gt/audi-r8-gt-in-garage.jpg" height="80px" width="150px">
        </a>
    </div>

    <div class="box two">
        <a href="http://www.google.co.uk">
        <img src="http://www.wallpaperswala.com/wp-content/gallery/audi-r8-gt/audi-r8-gt-in-garage.jpg" height="80px" width="150px">
        </a>
    </div>
</div>

然后在css中删除div的高度并添加clearfix类：

.box div {
color: #333333;
font-size: 12px;
padding: 10px 15px 0;
}
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

使用文本CSS向下移动图像

5 个答案: