Question

我想要左边的图像和右边的三个文字。我已经得到了，但试图在它们之间增加一些空间被证明是徒劳的。我已经尝试将填充左边距和边距添加到css中，但是他们忽略了它们就像啦啦队员做了一个书呆子一样。

这是我的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”应该成为：

Picaresque
Satire

...如果没有足够的空间放在一条线上;它现在正在做的是如果它的空间不足就会移动到图像下面（如果它被压扁的话，它会像我想要的那样断裂）。

Answer 1

    #mainImage {
        margin-right:15px;
    }

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

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

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

Answer 2

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

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

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

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

Answer 3

你没有（px）在padding-left和margin上定义。删除边距并仅在所有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;
}

Answer 4

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

.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

为什么在尝试在图像和某些文本之间添加边距或填充时，我不满意？

4 个答案: