1

在此处输入图像描述

我已经添加了我想要实现的图像。现有代码在下面的 jsfiffle 链接中。

我试图把它<div class="grid 6 cheese_people_r">变成一个弹性盒子，里面有两个项目，弹性盒子里的项目应该是图像和文本。我想要右边的图像和左边的文本，它们应该间隔开，以便可以阅读文本并且图像以合适的尺寸显示。我已经到了这一点，但似乎有一堵热墙。欢迎任何帮助。

例如，请参阅 jsfiddle

http://jsfiddle.net/UQSN4/4/

    <div class="grid 6 cheese_people_r">
        <li><img id="cheese_people_r" src="img/cheese_owner.jpg"><li>
        <li><p>The Big Cheese Owner <br/>  Sally Fiffle <br/> &ldquo;I wanted to create an online store that I'd would trust. This has been done by our amazing staff and the products they produce. Nothing can replace dedication and pasion.&rdquo;</p><li>
    </div>
4

2 回答 2

1

jsFiddle 演示

.cheese_people_r {
    width: 600px;
    overflow: hidden;
}

#cheese_people_r {
    float: left;
    margin: 10px;
}
于 2013-09-07T09:28:35.513 回答
0

好吧，你想要带flex盒子的东西，所以你来了。

不过，我确实是从头开始编写的，因此您的类/ID 不存在。

版本 1：可在 Firefox 和 Chrome 中使用，但由于 Safari/IE/Opera（非铬）缺乏内在宽度支持，因此无法在此处正确显示。

<ul>
    <li><img src="http://s15.postimg.org/vl0o8vobf/cheese_owner.jpg"/></li>
    <li><h2>The Big Cheese Owner</h2>
        <h3>Sally Fiffle</h3>
        <p>&ldquo;I wanted to create an online store that I'd would trust. This has been done by our amazing staff and the products they produce. Nothing can replace dedication and pasion.&rdquo;</p>
    </li>
</ul>

还有一些 CSS

ul, li {
    margin: 0;
    padding: 0;
    color: #524c43;
}
ul {
    border: 2px solid #524c43;
    -webkit-border-radius: 50px 0px 0px 50px;
    border-radius: 50px 0px 0px 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);
}
li {
    display: block;
    line-height: 1.27;
    padding: 5px;
    margin: 0;
    list-style-type: none;
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
}
li img {
    display: block;
    -webkit-border-radius: 50px 0px 0px 50px;
    border-radius: 50px 0px 0px 50px;
}

版本 2：使用显式宽度，因此它至少在浏览器中看起来还不错。不过，没有那么灵活。

<ul>
    <li style="max-width: 200px;"><img src="http://s15.postimg.org/vl0o8vobf/cheese_owner.jpg"/></li>
    <li style="max-width: 300px;"><h2>The Big Cheese Owner</h2>
        <h3>Sally Fiffle</h3>
        <p>&ldquo;I wanted to create an online store that I'd would trust. This has been done by our amazing staff and the products they produce. Nothing can replace dedication and pasion.&rdquo;</p>
    </li>
</ul>

CSS 是一样的。

第 3 版flex（我推荐）：当跨浏览器支持还没有真正存在时，不要装箱，并使用float@Itay 的无伤害版本。

于 2013-09-07T10:14:40.237 回答