Question

我有这段代码：

.wrapper{
    position: relative;
    height:315px;
}
.wrapper.image{
    position: absolute;
    bottom: 0px;
    height: 259px;
}
.wrapper.text{

}
.left{
    display: inline;
    float:left;
}

<div class="wrapper">
    <div class="image left"><img src="img.jpg"></div>
    <div class="text left">Text</div>
</div>

我希望图像位于包装div的底部，但是我的文本不会将图像div识别为元素，而文本div则位于图像div的顶部。我也可以为文本提供绝对的位置，但似乎太难编码了。还有另一种方法可以确保这两个div相互识别（更好的一个词吗？）？

我想要这个设计： http://i.imgur.com/iMjTg9z.jpg 在这个例子中，我显示了2行。

Answer 1

A fiddle:

这样，内容可以决定身高和响应

编辑：

这是另一个使用内联块的小提琴 - 但你必须真正理解定位以使其有用http://jsfiddle.net/sheriffderek/62pU3/

/ *垂直中心需要，（更多的是一件事......显示：内联块和垂直对齐：中间 - 涉及的所有事情......请记住它们彼此对齐 - 而不是它们父母* /

（原始）

HTML

<div class="block">

    <div class="image-w">
        <img src="http://placehold.it/600x300" alt="" />
    </div>

    <div class="text-w">
        <p>text text text</p>
    </div>

</div> <!-- .block -->

CSS

.block {
    width: 100%;
    border: 1px solid red;

    /* this should be a clear fix - or floated instead - because now that the divs inside are floated, it no longer understands how they work unless clear fixed, or (floated itself ) */ 
    overflow: hidden; /* temp replacement for clear fix */
    /* float: left; */
}

.image-w img { /* image fills wrapper | decide size with wrapper */
    display: block;
    width: 100%;
    height: auto;
}

.block .image-w {
    float: left;
}

.block .text-w {
    float: left;
}

/* @media rule "break-point" */
@media (min-width: 40em) {

    .block {
        padding-top: 2em; /* arbitrary space */
    }

    .block .image-w {
        max-width: 15em;
        margin-right: 1em;
    }

    /* i would usually use nth-of-type(even) {} */
    .oposite-block .image-w {
        float: right;
    }

    .block .text-w {
        float: none;
        max-width: 50em;
    }

} /* end breakpoint */

Answer 2

您可以将图像和文字包装在一个div内并应用位置：绝对。

Fiddle

.wrapper {
    position: relative;
    height:315px;
    border: 1px solid red;
}
.content {
    position: absolute;
    bottom: 0px;
} 


.left {
    display: inline-block;

}

Answer 3

选中此Demo jsFiddle

HTML

<div class="wrapper">
    <div class="content">
    <div class="image">
        <img src="http://podcast.iu.edu/upload/IUSEUITS/images/300x300.gif" />
    </div>
    <div class="text">Text</div>
        </div>   
</div>

CSS

.wrapper {
    position: relative;
    height:50px;
    border: 1px solid #f15a27;
}
.content {
    position: relative;
} 
img{
    width:100px;
    height:50px;
}
.image {
    display: inline-block;
    float:left;
}
.text {
    margin:16px 10px 0 0;
    float:right;
}

CSS内容使用Div元素向左或向右（图像和文本）设置

3 个答案:

编辑：

HTML

CSS

HTML

CSS