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

【问题标题】：CSS Content set left or right (Image and text) using Div element使用 Div 元素向左或向右设置 CSS 内容（图像和文本）
【发布时间】：2014-04-07 23:19:12
【问题描述】：

我有这个代码：

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

【问题讨论】：

仍然不明白您想要从现有设计中得到什么？
我想要底部的img，img右侧的文字。如果屏幕尺寸发生变化，我希望它重新调整左右边距。 with position: absolute，我做不到。
这个还是很不清楚的。你想要什么，以什么顺序，什么屏幕尺寸 - 大致。
放置任何高度都太难编码了。
这有帮助吗？ i.imgur.com/iMjTg9z.jpg

标签： html css

【解决方案1】：

A fiddle:

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

编辑：

这是另一个使用 inline-block 的小提琴 - 但你必须真正了解定位才能让它有用http://jsfiddle.net/sheriffderek/62pU3/

/* 垂直居中需要，（不止一件事... display: inline-block 和 vertical-align: middle - 在所有涉及的事情上...请记住它们彼此对齐 --- 不是他们的父 */

（原文）

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

【讨论】：

这个问题：如果文本很长，它会溢出到图像的一侧，我不希望它溢出到那里。我想我必须使用媒体断点......你是什么意思“我通常会使用第 n 个类型”？
可能有 10 种方法可以很好地做到这一点，但我真的不能再花时间猜测你的限制了。这是花车的最后一个小提琴。试试看。 jsfiddle.net/sheriffderek/kbv3d祝你好运！

【解决方案2】：

您可以将图像和文本包装在一个 div 中并应用 position: absolute。

Fiddle

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


.left {
    display: inline-block;

}

【讨论】：

【解决方案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;
}

【讨论】：