3

我想要左边的图像和右边的三段文字。我知道了，但试图在它们之间添加一些空间被证明是徒劳的。我尝试在 CSS 中同时添加 padding-left 和 margin，但他们忽略了它们，就像啦啦队长做书呆子一样。

jsfiddle 在这里：http: //jsfiddle.net/GwYJH/

这是我的 HTML：

<a id="mainImage" class="floatLeft" href="https://rads.stackoverflow.com/amzn/click/com/1456334050" rel="nofollow noreferrer"><img height="200" width="160" src="http://ecx.images-amazon.com/images/I/51ETjedyMAL._BO2,204,203,200_PIsitb-sticker-arrow-click,TopRight,35,-76_AA300_SH20_OU01_.jpg"></img></a>

<div class="category">Picaresque Satire</div>
</br>
<div class="title">the Zany Time Travels of Warble McGorkle</div>
</br>
<div class="author">Blackbird Crow Raven</div>
</br>

...和CSS：

body {
    background-color: black;
}
.floatLeft {
    float: left;
}
.category {
    display: inline-block;
    font-family: Consolas, sans-serif;
    font-size: 2em;
    color: Orange;
    padding-left: 25;
    margin: 25;
}
.title {
    display: inline-block;
    font-family: Calibri, Candara, serif;
    color: Yellow;      
}
.author {
    display: inline-block;
    font-family: Courier, sans-serif;
    font-size: 0.8em;
    color: White;
}

如果视图框变窄，我还希望每段文本都能换行。IOW，“流浪汉讽刺”应该变成：

Picaresque
Satire

...如果没有足够的空间容纳一行；如果空间不足，它现在正在做的就是在图像下方移动（如果它被压得更厉害，它会按照我的意愿破坏）。

4

4 回答 4

3 
    #mainImage {
        margin-right:15px;
    }

   .category p {
   word-wrap:break-word;
    }

在这里演示：http: //jsfiddle.net/GwYJH/8/

单词如何换行（即，如果它换行到图像的右侧或下方）完全取决于包含元素的宽度。

于 2013-06-13T23:48:15.943 回答
2

非零填充和边距值需要指定一个单位。我假设你想要像素：

padding-left: 25px;
margin: 25px;

http://jsfiddle.net/GwYJH/6/

旧版本的 IE 允许您省略该单元，但符合现代标准的浏览器不允许。

于 2013-06-13T23:46:50.610 回答
2

您没有在 padding-left 和 margin 上定义 (px)。删除边距并仅在所有 div 上使用 padding-left。

请改用此代码：

.category {
    display: inline-block;
    font-family: Consolas, sans-serif;
    font-size: 2em;
    color: Orange;
    padding-left: 25px;

}
.title {
    display: inline-block;
    font-family: Calibri, Candara, serif;
    color: Yellow;
    padding-left: 25px;

}
.author {
    display: inline-block;
    font-family: Courier, sans-serif;
    font-size: 0.8em;
    color: White;
    padding-left: 25px;
}
于 2013-06-13T23:50:06.267 回答
2

我有一些建议给你。首先，使用此代码获取空格。

.floatLeft {
    float: left;
    padding-left: 25px;
    margin: 25px;
}

, 将宽度设置为.category, 这样你就可以换行了

.category {
    display: inline-block;
    font-family: Consolas, sans-serif;
    font-size: 2em;
    color: Orange;
    padding-left: 25;
    width:30px;
}

jsfiddle

于 2013-06-13T23:50:37.910 回答