图像和文本之间的 CSS float 边距

Question

如果这是微不足道的事情，我深表歉意，但我似乎找不到解决这个问题的方法。

所以我有这个非常简单的布局。 2 个 div 元素向左浮动，一个向右浮动。右边是图片，左边是文字。在文本部分的顶部(也在左侧)我想要另一个 div 只是一个衬垫，具有不同背景颜色的文章详细信息，例如作者，日期等。

   <div id="mainarticle">
       <article>           

       <div id="mainimgcontainer">
             <img id="mainimage" src="theimage.jpg" />
       </div> <!-- #mainimgcontainer -->

       <div id="mainarticle_details">
         <span id="by">BY JOE BLOGGS</span><span class="mainarticle_date">11/04/2014</span>
       </div><!-- #mainarticle_details -->

       <div id="maintext">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </div> <!-- #maintext -->
       </article>
   </div> <!-- #mainarticle -->

带有图像的右列占屏幕宽度的 50%。其余的将在它旁边和下面流动。

#mainimgcontainer
{
  width: 50%;   
  float: right;
  margin-left: 10px;
}

div#mainarticle_details
{
  background-color: #f7f2e7;
  border-bottom: 2px solid #dac397;
  display: block;   
  line-height: 22px;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: bottom;
  overflow: auto;
  height: 23px;
}

img#mainimage
{
    width: 100%;    
    min-width: 100px;
    margin: 0px;
    padding: 0px;
    max-height: 32%;
}

现在，为了让正文不触及图像，我在图像上放置了 margin-left : 10px;。但是，这也会在顶部 #mainarticle_details 和图像之间留出间隙。我希望这两个相互接触。

另一方面，如果我将 padding-right 或 margin-right 添加到 #maintext，它只适用到文本占满宽度且文本仍接触图像时。

有什么方法可以让顶部的#mainarticle_details 触摸图像，但文本与图像间隔10px？

我在这里创建了一个 jsfiddle:http://jsfiddle.net/A7uSr/29/

更新

忘了说，这是为移动网站准备的。所以它需要适用于不同的屏幕宽度。 fixed 定位在移动设备上也很容易出错，比如普通的 Android 浏览器(不是 Chrome)，所以也要记住这一点。这最终将成为文章的 landscape View (纵向 View 只会在顶部显示图像，在下方显示文本)。出于这个原因，图像必须位于文本之上，当设备转到横向模式时，CSS 会将它移到一边。

我还从我的真实场景中添加了更多细节，我意识到这些细节会影响解决方案。主要是包含div的padding和图片的大小。 JSFiddle 也更新了。

Answer 1

我成功地将 header 设置为 position:absolute 和 width:100%。这允许标题延伸到图像后面，使其看起来与图像接触，同时文本保留 10 像素的边距。

我将图像移到了 HTML 中的标题上方，以避免必须设置 z-index。

我还为图像设置了 CSS 定义，使其符合其容器的百分比宽度。

WORKING EXAMPLE (jsfiddle)

HTML:

<div id="mainarticle">
    <article>

        <div id="mainimgcontainer">
            <img src="http://imgsv.imaging.nikon.com/lineup/lens/specoalpurpose/micro/af-s_vr_micro-nikkor_105mmf_28_if/img/sample/sample_l.jpg" />
        </div>        
        <!-- #mainimgcontainer -->

        <div id="mainarticle_details"> <span id="by">BY JOE BLOGGS</span></div>       
        <!-- #mainarticle_details -->

        <div id="maintext">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Nam blandit lectus quis vestibulum blandit. Nunc viverra lectus eget tristique tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc imperdiet porta tincidunt. In vitae felis volutpat nisi pulvinar aliquam. Ut tempor sagittis congue. Aenean at commodo lorem. Ut faucibus tellus egestas facilisis dictum. Quisque eget mi et elit tincidunt porttitor. Pellentesque egestas libero sit amet urna sodales, non hendrerit lorem tempus. Donec risus enim, convallis in hendrerit sed, dapibus at purus. Vestibulum eu nisl at velit placerat mollis sed quis neque. In hac habitasse platea dictumst. Vestibulum venenatis at lacus a ullamcorper. Integer eget lectus id tortor bibendum imperdiet.</p>
            <p>Maecenas consectetur eros erat, quis pharetra nulla ornare eget. Nam ac risus porttitor, fringilla quam eu, cursus lacus. Cras adipiscing enim vitae leo dictum, at varius sapien bibendum. Quisque consequat suscipit purus, ac luctus ipsum volutpat ut. Nam fermentum tristique turpis. Sed semper orci et turpis placerat, non tincidunt est eleifend. Aenean a ligula eu libero facilisis scelerisque sit amet fringilla sapien. Aenean dictum ante orci, vel facilisis metus posuere ut. Maecenas sed odio ut velit tincidunt venenatis in ut lacus. Pellentesque condimentum tellus eu mollis hendrerit. Mauris adipiscing arcu ut fringilla aliquam. Nullam ultricies ac est nec cursus. Morbi vitae leo id nisi placerat tincidunt. Ut pulvinar, justo vel euismod aliquet, urna lorem feugiat metus, sit amet sagittis ipsum nibh quis augue. Vestibulum quis convallis turpis. Aenean fringilla ut nulla et laoreet.</p>
            <p>Nunc id nibh neque. Fusce ultricies quam vehicula elit dictum convallis. Aenean auctor, massa venenatis ullamcorper semper, ante purus vestibulum lacus, a ullamcorper arcu enim sit amet ante. Nulla aliquet vel lacus eu vulputate. Morbi elit metus, laoreet vel nunc at, consectetur pellentesque lectus. Ut blandit mi in odio sollicitudin, sit amet sodales lorem sollicitudin. Suspendisse lobortis urna sit amet faucibus posuere. Mauris cursus ac neque vitae malesuada. Curabitur a lorem ut nisi vestibulum scelerisque a id risus. Nulla mattis rhoncus congue. Quisque nec dolor nulla. Sed tempus nisl aliquam, pellentesque lacus in, faucibus felis. Nulla sit amet arcu rhoncus, blandit nunc sit amet, tincidunt erat.</p>
            <p>Sed vehicula enim velit, vitae fermentum felis consectetur nec. Sed sollicitudin vehicula leo quis laoreet. Mauris lobortis vitae massa id malesuada. Nam sit amet vulputate est, ut adipiscing orci. Quisque non sapien lectus. Nullam dapibus mauris non nisi lacinia, sodales posuere sem pellentesque. Sed tincidunt nibh id lacus rutrum sodales. Sed consequat elementum quam, sit amet tempus lorem ornare quis. Etiam sit amet aliquam ligula, ut feugiat ipsum. Nunc condimentum turpis nibh, vel faucibus arcu pretium ac. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quis justo justo. Nam molestie suscipit velit, et ullamcorper mi laoreet in. Cras congue euismod odio, ut sagittis ligula feugiat sit amet.</p>
        </div>

    </article>
</div>

CSS:

body {
    position:relative;
    margin:10px;
}
#mainimgcontainer {
    position:relative;
    width: 50%;
    float: right;
    margin-left:10px;
}
#mainimgcontainer img {
    width:100%;
}
div#mainarticle_details {
    background-color: #f7f2e7;
    border-bottom: 2px solid #dac397;
    line-height: 22px;
    height: 23px;
    position:absolute;
    width:100%;
}
div#mainarticle_details span {
    padding:0 0 0 10px;
}
div#maintext {
    position:relative;
    padding:23px 0 0;
}

(作为个人说明，我认为 keep the margin consistent 或 put the header above the image and text 看起来更好。)

更新:

正如您所提到的，较长的标题没有得到很好的处理。如果它们太长，它们就会消失在图像后面。

我意识到 position:absolute 不是必需的。我将其从标题中删除，以便允许换行的多行标题。 width:100% 部分将标题背景扩展到图像后面，同时仍允许标题文本换行。

我还添加了一个媒体查询来演示如何针对移动设备更改布局。

<div id="mainarticle_details">
    <p id="by">BY JOE BLOGGS AND A LONGER HEADING</p>
</div>

div#mainarticle_details {
    background-color: #f7f2e7;
    border-bottom: 2px solid #dac397;
    line-height: 22px;
    position:relative;
    width:100%;
}
div#mainarticle_details p {
    margin:0;
    padding:0 0 0 10px;
}

@media (max-width: 600px) {
  div#mainimgcontainer {
    float:none;
    width:100%;
    margin:0;
  }
}

WORKING EXAMPLE (jsfiddle)