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

我有以下代码：

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

.wrapper{
位置：相对位置；
高度：315px；
}
.wrapper.image{
位置：绝对位置；
底部：0px；
高度：259px；
}
.wrapper.text{
}
.左{
显示：内联；
浮动：左；
}
正文

我希望图像位于包装器div的底部，但是我的文本无法识别图像div作为元素，文本div位于图像div的顶部。 我也可以为文本设置绝对位置，但似乎太难编码了。 有没有其他方法可以确保这两个div相互识别（更好的说法？）

我想要这个设计：

---

在本例中，我显示了两行。

您可以将图像和文本包装在一行中

div

并应用position:absolute

检查这个

HTML

通过这种方式，内容可以决定高度，并且具有响应性

编辑： 这是另一个使用内联块的提琴——但你必须真正理解定位才能使它有用

/*垂直中心需要，（不止一件事…显示：内联块和垂直对齐：中间-在所有涉及的事情上…记住它们是相互对齐的，而不是它们的父对象*/

（原件）

HTML

---

还是不明白你想从你现有的设计中得到什么？我想让img在底部，文本在img的右侧。如果屏幕大小改变，我想让它重新调整左/右边距。使用position:absolute，我不能这样做。这仍然很不清楚。你想要什么，以什么顺序，以什么屏幕大小-大致。放置任何高度都太难编码了。这有帮助吗？问题是：如果文本很长，它会溢出到图像的一侧，我不想让它溢出到那里。我想我必须使用媒体断点…你说“我通常会使用第n种类型”是什么意思？可能有10种方法可以很好地做到这一点，但我真的不能再花时间猜测你的限制。这里是最后一个摆弄浮动的方法。试试吧。祝你好运！

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


.left {
    display: inline-block;

}

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

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

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

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