0

左に画像、右にテキストがあるdivがあります。テキストが少ない場合は問題なく動作しますが、テキストを追加するとレイアウト全体が破壊されます!

フィドル。

最初の 2 行は問題なく動作しますが、さらにテキスト (3 行目) を追加すると、レイアウトが恐ろしくなります。

この問題を解決するにはどうすればよいですか?

CSS:

.postWidget {
    clear:both;
    margin-bottom: 50px;
}
.postWidget img {
    float: left;
}
.postWidget .job_title {
    font-size: 20px;
    margin-left: 30px;
}
.postWidget .description {
    margin-left: 30px;
}
.postWidget .description span {
    font-size: 15px;
    margin-left: 30px;
}
.postWidget span a {
    color: black;
    text-decoration: none;
}
.postWidget .user_desc {
    margin-left: 80px;
    padding-top:5px;
}
.postWidget .user_desc .name {
    font-weight: bold;
}
.postWidget .user_desc .name, .profession {
    font-size: 12px;
}
4

2 に答える 2

1

レイアウトで遊ぶ:) http://jsfiddle.net/TjDZa/3/

.postWidget .description {
    margin-left: 30px;
    overflow:hidden;
}

代わりに 次の場所からmargin-right設定することもできます: http://jsfiddle.net/TjDZa/4/imgmargin-left.description

.postWidget img {
    float: left;
    margin-right:30px;
}

.postWidget .description span {
    font-size: 15px;
}
于 2013-07-03T17:18:50.390 に答える