Question

我有一个包含文本项列表的个人资料部分。我希望文本环绕个人资料图片。

目前我有这个小提琴：https://jsfiddle.net/3an39f3g/1/

我希望.desc文字位于职位名称下方，但随后在图片周围流动并在图片下方达到100％宽度。

段：

ul li {
    width: 400px;
    list-style-type: none;
}
.name {
    font-size: 15px;
    color: black;
    margin-bottom: 16px;
    width: 40%;
    float: left;
}
.job-title {
    color: #7b7b7b;
    font-size: 15px;
    margin-bottom: 30px;
    width: 40%;
    float: left;
}
.desc {
    font-size: 15px;
    line-height: 27px;
    width: 100%;
    float: left;
}
img {
    width: 45%;
    margin-right: 10%;
    float: left;
}

<li>
    <ul>
        <li><img src="http://www.clker.com/cliparts/0/P/y/1/z/v/placeholder-md.png"></img></li>
        <li class="name">JOHN SMITH</li>
        <li class="job-title">Job Title</li>
        <li class="desc">Suspendisse blandit, mi et vehicula maximus, nisl justo pharetra ligula, vitae aliquam est nulla sed magna. Vivamus neque mi, ultricies ut felis nec, finibus vestibulum diam. Donec rhoncus orci at sem varius lacinia.</li>
    </ul>
</li>

Answer 1

如果您希望布局适用于任何宽度，请将图像移动到包含文本的列表之外。

新小提琴：

https://jsfiddle.net/okqmzrss/1/

段：

ul li {
    width: 400px;
    list-style-type: none;
}
li img {
    width: 45%;
    margin-right: 10%;
    display: inline;
    float: left;
}
.name {
    font-size: 15px;
    color: black;
    margin-bottom: 16px;
    width: 40%;
    float: left;
}
.job-title {
    color: #7b7b7b;
    font-size: 15px;
    margin-bottom: 30px;
    width: 40%;
    float: left;
}
.desc {
    font-size: 15px;
    line-height: 27px;
    width: 100%;
}

<li>
    <img src="http://www.clker.com/cliparts/0/P/y/1/z/v/placeholder-md.png"></img>
    <ul>
        <li class="name">JOHN SMITH</li>
        <li class="job-title">Job Title</li>
        <li class="desc">Suspendisse blandit, mi et vehicula maximus, nisl justo pharetra ligula, vitae aliquam est nulla sed magna. Vivamus neque mi, ultricies ut felis nec, finibus vestibulum diam. Donec rhoncus orci at sem varius lacinia.</li>
    </ul>
</li>

Answer 2

试试这个jsfiddle

html ：

li{
    list-style-type: none;
}
img{
    margin-right: 5%;
    margin-bottom: 15px;
    float: left;
}
.name {
    font-size: 15px;
    color: black;
    margin-bottom: 16px;
}
.job-title {
    color: #7b7b7b;
    font-size: 15px;
    margin-bottom: 30px;
}

<强> CSS ：

{{1}}

在列表中的另一个图像周围环绕列表文本

2 个答案: