在代码中右对齐保留左内容的内容

mex 发布于 2019-03-09 css 最后更新 2019-03-09 14:32 2 浏览

请参阅以下代码:http://jsfiddle.net/chricholson/tyLbE/1/ HTML

<section>
    <div>Secondary content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
</section>
CSS
section { border: 1px solid red; overflow: hidden; }
div { float: right; width: 48%; height: 200px; background: #eee; }
p { width: 48%; }
我有一个div(BoxA)浮动到右侧,这使我可以将我的段落标签保留在任何单独的容器之外。我使用溢出攻击确保外部容器增长到a)段落或b)BoxA的高度。 我想要的是重新排序HTML
  1. BOXA
对我来说,最明显的解决方案是CSS定位辅助内容,但是这当然会阻止BoxA盒子比段落列表更长的外部容器的增长。我想避免使用任何类型的Javascript来设置高度,从SEO角度来看,这并不重要。 我能想到的另一种解决方案是将段落包装在自己的容器中,但这感觉就像是不必要的标记,它不应该在那里(这是一个应该由CSS处理的视觉事物)。
已邀请:

khic

赞同来自:

首先,+1给Ejay,这肯定是我追求的结果。但是,有一些事情让我担心实施(特别是display: table-cellwidth: 1%。我真的不能错,因为它确实有效,但我的直觉是尖叫着我,有些东西不对,可能会让我感到困惑实际上它确实略有突破,取决于容器宽度我会在Chrome中获得1px的差距:

Unknown Gap 无论如何,它激励我更加努力,我想出了这个:http://jsfiddle.net/z6TMJ/2/ HTML
<section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
    <div>Secondary content</div>
</section>
CSS
section {
    border: 1px solid red;
    overflow: hidden;
}
div {
    background: none repeat scroll 0 0 #EEEEEE;
    margin-left: 50%;
    width: 50%;
    height: 246px;
    border: 1px solid #000;
    box-sizing: border-box;
}
p {
    clear: left;
    float: left;
    width: 50%;
}
paragraphs以相同的方式设置样式,但现在div独自完成它的自然事物。然后使用margin-left将其定位在右侧(删除边距实际上会使div出现在paragraphs后面。 虽然这可能不适合所有情况,我知道一些事情,如容器的宽度和段落的宽度和次要内容这种方式似乎很好。

vvelit

赞同来自:

我建议你使用像这个例子中的html包装器: http://jsfiddle.net/tyLbE/4/

<section>
    <div class="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
    </div>
    <div class="right">
        Secondary content
    </div>
    <div class="clear"></div>
</section>
和CSS:
section { border: 1px solid red; overflow: hidden; }
div.left { float: left; width: 48%; }
div.right { float: right; width: 48%; height: 200px; background: #eee; }
div.clear { clear: both; }
您可以省略“清除”,因为您在左右框后面没有任何内容,但如果您想在两个框下面有一些内容(即使它们没有相同的高度),这就是您可以停止浮动的方式)

det

赞同来自:

我不确定我是不是你说得对,但似乎在标记中,你想要在<div>之前移动<p>s,但你希望显示与你的小提琴相同,即右边的灰色区域。检查此fiddle以查看它是否解决了您的问题。

更新

CSS
section{ border: 1px solid red; overflow: hidden; }
div{
   background: none repeat scroll 0 0 #EEEEEE;
   border: 1px solid #000000;
   display: table-cell;
   height: 246px;
   width: 1%;
}
p{
   clear: left;
   float: left;
   width: 48%;
}

和标记(未更改)
  <section>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
     <div>
        Secondary content
     </div>
</section>