使用文本CSS向下移动图像

我有一个带有一些文本的div，然后在文本下面有一个图像，每当你添加更多的文本，它就会在图像后面，（我在中创建的基本示例我希望它将图像向下推足够远，以便您可以看到文本。但是我希望这两个框仍然是内联的，以便图像保持一致，理想情况下，我不希望只更改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;
}

一些文本1
我的一段文字在车后是看不见的

一些文本2
我的一段文字将不再在车后可见

.盒子{
颜色：#333333；
字体大小：12px；
高度：305px；
填充：10px 15px 0；
宽度：150px；
}
.包厢部{
颜色：#333333；
字体大小：12px；
高度：90px；
填充：10px 15px 0；
}
.二{
浮动：对；
利润率顶部：-310px；
}

移除

高度

并放置

最小高度：90px；

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

---

之所以发生这种情况，是因为您将

高度：90px

指定给了

.box div

将此“最小高度：90px”写入，而不是

height

---

那么基本上你希望所有框之间的文本高度保持一致？ 这很难

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

<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设置高度，这更简单。

---

查看此代码以了解是否是您想要的结果。

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

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

.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%;
}