html - 使用 Div 元素向左或向右设置 CSS 内容(图像和文本)

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:

这样内容可以决定高度并且它是响应式的

编辑:

这是另一个使用 inline-block 的 fiddle - 但你必须真正理解定位才能让它发挥作用 http://jsfiddle.net/sheriffderek/62pU3/

/* 垂直居中需求，(不止一件事...显示:内联 block 和垂直对齐:中间 - 在所有涉及的事情上...请记住它们彼此对齐 --- 而不是它们的父 */

(原创)

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