CSS浮动图像和文本之间的边距

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视图（纵向视图将在顶部显示图像，在下方显示文本）。因此，图像必须位于文本的顶部，当设备转为横向模式时，CSS只会将其移动到侧面。

我还从我的实际场景中添加了一些细节，我意识到这将影响解决方案。主要是包含div的填充和图像的大小。 JSFiddle也更新了。

Answer 1

通过将标头设置为position:absolute和width:100%，我获得了成功。这允许标题延伸到图像后面，使其看起来触摸图像，而文本保留10px边距。

我将图片移到了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看起来更合适。）

UPDATE：

如你所述，较长的标题处理得不好。如果它们太长，它们会消失在图像后面。

我意识到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)

Answer 2

正在进行什么

我们需要图片的margin不会影响标题div，因此我们需要position absolute。我们还需要将整个包装器设置为position:relative以捕获标头的位置。最后，我们需要在文本中添加padding-top。

代码

#mainarticle article {
    position:relative;
}

div#mainarticle_details {
    width:47%;   /* This could be 46%, but due to sub-pixel issues pointed out in comments, if you put 46%, some browsers will show a tiny break. */
    padding:0 2%;
    position:absolute;
    z-index:-1;
}

#maintext {
    padding-top: 15px;
}

<强> Working Fiddle

结果

Answer 3

1）。由于mainarticle_details中的margin-left: 10px;，您mainimgcontainer未触及图片。设为0.

2）。一旦你做了浮动：对，它仍然在它背后的任何内容之上。这意味着，您的maintext就在您的形象背后。这意味着，如果您不希望它触及图像，请添加padding-right: 52%;。为什么52％，因为图像占50％，所以52会给一些填​​充，文字不会触摸图像！

jsFiddle