使用CSS控制div内联块之间的包装间距

Question

我正在处理的页面位于http://www.derekbeck.com/1775/excerpts/

它在桌面浏览器中看起来很好，但在移动屏幕截图中，如下所示，它被迫包装。 （见下面我的问题图片......）

(full sized image)

我试图让它优雅地包裹，但我有两个问题：

1）是否有一些CSS方法来控制div inline-block（class =“exnote2”）Want the entire chapter?<BR>Sign up for the newsletter!如何包装？

具体来说，我想：

1a）如果它位于第二行，则它左侧的padding-left: 20px;不存在（但如果它确实全部打开，则必须保持与PDF图标的20px）一行），

1b）div inline-block（class =“exnote2”）上方的一些空格，因此它不是那么接近“Read Online”图标。但是，如果我添加padding-top或margin-top，它会影响桌面版本的良好布局（上面链接）。

对于它的价值，对于上面的1b），我为图像后面的整个内联块一起进行了jury-rig的解决方案，整个div内联块包含文本（class =“exitemdetails”）。我是这样做的：

.exitemdetails {
margin-left: 25px;
/* The following allows for graceful wrapping for mobile phones */
padding-top: 20px;
position: relative;
top: -10px; /* half the padding-top */
}

我也可以为Want the entire chapter?<BR>Sign up for the newsletter!行审判一些东西，但我怀疑在不同条件下它不会像我希望的那样显示出来。因此，我在这里发帖，希望有一个更好，更优雅的解决方案，即如何使用CSS来控制div的包装方式，以及它们之间的间距，只有它们确实包装。

2）我还有一个与此相关的问题：当没有足够的空间时，是否没有简单的CSS方法来缩小书籍封面图像？我试过这个，但它没有做任何事情：

.eximage {
width: auto;
height: auto;
}
.eximage img {
max-width: 100%; 
height: auto;
}

感谢您的期待！ 德里克

Answer 1

您是否考虑过使用css媒体查询来更改不同屏幕尺寸的网页布局？可能值得一试。

http://www.w3.org/TR/css3-mediaqueries/