Css 水平从右到左浮动答案

【问题标题】：Css Horizontal Float right to leftCss 水平从右到左浮动
【发布时间】：2015-10-28 18:36:57
【问题描述】：

我想要两个这样的 div：

.intro-body-left {
    float: left;
    margin-top: 40px;
    width: 40%;
    border-color: #ccc;
    border-radius: 15px;
    background-color: #f8f8f8;
    border: 1px solid;
}

.intro-body-right {
    float: right;
    width: 59%;
    margin-top: 40px;
    border-color: #ccc;
    border-radius: 15px;
    background-color: #f8f8f8;
    border: 1px solid;
}

HTML 代码：

   <div class="container">  
    <div id="intro">
        <div class="intro-header">
        </div>
        <a class="none" href="http://www...">
        <div class="intro-body-left animated fadeInLeft">
            <p>some text</p>
        </div>
        <div class="intro-body-right animated fadeInRight">
            <p> some text</p>
        </div>
    </div>
</div>

但现在我想让右边的容器漂浮在左边的下面。所以右边的容器应该保持在右边，但所有内容都在左边的容器下面应该在左边的div下面。所以正确的 div 意味着那里有不同的厚度。

【问题讨论】：

仅供参考，您可能也应该在此处添加 html 代码，因为如果链接将来无法使用，SO 问题应该是自给自足的。
不要浮动正确的 div。牺牲圆角。
抱歉我的错误。我是新来的。
但这是我的 HTML 代码

www...">

&Uumlber

一些文字

新闻

一些文字
您希望文本在下面较长的部分中继续显示，还是在进一步向下时您希望文本的宽度与右上角的列宽相同？

标签： html css containers floating

【解决方案1】：

将你的 css 更改为：

.intro-body-left {
    float: left;
    margin-top: 40px;
    width: 40%;
    border-color: #ccc;
    border-radius: 15px;
    background-color: #f8f8f8;
    border: 1px solid;
}

.intro-body-right {

    width: 100%;
    margin-top: 40px;
    border-color: #ccc;
    border-radius: 15px;
    background-color: #f8f8f8;
    border: 1px solid;
}

【讨论】：

【解决方案2】：

这是一种（非常简单的）方法。

小提琴：https://jsfiddle.net/69hdLvch/

HTML

<div class="one">Top Top Top Top Top Top Top Top Top Top Top Top </div>
<div class="two">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </div>

CSS

.one
{
    width:200px;
    height:200px;
    border:20px transparent;
    background:#f00;
    position:absolute;
}

.two
{
    width:1000px;
    height:500px;
    background:#00f;
    padding-left:250px;
}

【讨论】：

【解决方案3】：

对于这项工作：

.intro-body-left {
     position : absolute;
     top: 40px;
     width: 40%;
     left : 0
     margin : 10px ; // for add space between 2 columns
     border-color: #ccc;
     border-radius: 15px;
     background-color: #f8f8f8;
     border: 1px solid;
 }
.intro-body-right {
   position : relative;
   width: 100%;
   margin-top: 40px;
   border-color: #ccc;
   border-radius: 15px;
   background-color: #f8f8f8;
   border: 1px solid;
  }

【讨论】：

&Uumlber

新闻