1

我有一个带有一些文本的 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;
}
4

5 回答 5

0

取出height并放置min-height: 90px;

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

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

于 2013-10-29T09:22:44.113 回答
0

它正在发生，因为你已经放弃height:90px了.box div。

而不是height，写这个'最小高度：90px'。

这是小提琴。

于 2013-10-29T09:28:02.213 回答
0

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

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

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

于 2013-10-29T09:30:12.247 回答
0

密码笔

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

于 2013-10-29T09:34:31.730 回答
0

你可以把文字放在一个盒子里，把图片放在另一个盒子里。

<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%;
}
于 2013-10-29T09:34:58.680 回答