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

如果这是件小事，我很抱歉，但我似乎找不到解决办法

所以我有一个非常简单的布局。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 -->

现在，为了使主文本不接触图像，我在左边加了一个

边距：10px在图像上。但是，这也会在顶部的
#main article_details
和图像之间留出一段距离。我希望这两个人彼此接触

另一方面，如果我仅在
#maintext
中添加
填充右键
或
边距右键
，则它仅适用于文本为全宽且文本仍与图像接触的情况

有没有办法让顶部的
#main article_details
触摸图像，但文本与图像的间隔为10px

我在这里创建了一个JSFIDLE：

更新

忘了提一下，这是为移动网站设计的。因此，它需要在不同的屏幕宽度下工作
fixed
positioning在Android浏览器（而非Chrome浏览器）等移动设备上也存在很多问题，所以请记住这一点。这将最终成为文章的
横向视图
（纵向视图将只在顶部显示图像，在底部显示文本）。由于这个原因，图像必须位于文本的顶部，当设备切换到横向模式时，CSS只会将其移到一侧

我还从我的真实场景中添加了一些细节，我意识到这些细节将影响解决方案。主要是包含
div的填充和图像的大小。
jsiddle也进行了更新。
1）。您的
main文章\u详细信息
未触及图像，因为
左边距：10px在
maingcontainer
中。让它变成0

2） 。一旦你做了一个浮动：对，它会保持在任何内容的顶部。也就是说，您的
maintext
位于图像后面。这意味着，如果你不想让它接触到图像，请添加
右填充：52%。为什么是52%，因为图像占了50%，所以52将提供一些填充，文本将不会触及图像

发生了什么事
我们需要图像的
边距
不影响标题
div
，因此我们需要
定位
它
绝对
ly。我们还需要将整个包装器设置为
position:relative
，以捕获标题的位置。最后，我们需要在文本中添加一个
padding top

代码

结果
我成功地将标题设置为
位置：绝对
和
宽度：100%
。这允许标题延伸到图像后面，使其看起来与图像接触，而文本保留10px的边距

我在HTML中将图像移到标题上方，以避免设置
z-index

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


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>

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;
}

（就我个人而言，我认为这看起来比

更新：
正如你提到的，较长的标题处理得不好。如果它们太长，它们就会消失在图像后面

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

我还添加了一个媒体查询，以演示如何改变手机的布局

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

您的示例显示了隐藏在网站外页面底部的文本和标题，以及顶部的图像？我在chrome windows 7上查看它。这很奇怪。屏幕截图显示了Firefox中的情况。史蒂文，我很感谢你指出错误，但现在已经修复了，你能删除否决票吗？你的更新效果很好。但我有时会在标题和图像之间出现一个小间隙，这可能是因为。标题的宽度加上图像的宽度加起来应该是100%，但是，因为它们是基于百分比的，子像素是四舍五入的，并且不总是加起来正好是100%。伙计们，不管谁否决了他，请将其删除，因为这是迄今为止最好的解决方案……您是否打算在第一段之后关闭
div#maintext
？假设JSFIDLE中的附加段落应该在
div#maintext
中，安全吗？是的，很抱歉。。。当我添加了更多的文本以更好地演示它时，我忘记了移动结束符。没问题，谢谢澄清。我修复了它（上面包含了新的JSFIDLE链接）。我还澄清了为什么它是这样构造的，因为这是针对移动网站的。你介意解释一下在移动网站上使用绝对位置的本质问题吗？我没听说过。这是一个有趣的概念，但文本并没有围绕图像。它之所以出现换行，是因为OP（意外）在第一段之后关闭了
div#maintext
。以更窄的宽度查看：是的，我向下移动了
我添加了一些额外的
lorem ipsum
文本以改进演示，但忘记移动它。更新后的内容如下：@jaycp A
右键填充：52%
还将使图像下的其余文本也填充空白。我不想这样。标题位于图像下方的原因是，此CSS仅适用于
横向
，在
纵向
中，客户端希望它是图像、细节、主文本，所有内容都位于彼此下方。e的顶部有一个
h1
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;
}

<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;
  }
}