html - 右にフローティングdiv

Question

次のHTMLでは、.leftにfloat：rightがあり、これは変更できません。.left divのfloat：rightを変更せずに、.right divを右側に移動することはまだ可能ですか？

HTML：

<div class="box">   
    <div class="wrap">
        <div class="left">This should be left.</div>
    </div>
     <div class="right">This should be right</div>    
</div>

CSS：

.box{
    width: 300px;
    overflow: hidden;
    border: 1px solid red;    
}

.left{
    width: 100px;
    float: right;    /* cannot change */
    border: 1px solid blue;     
}

.right{
    width: 100px;
    float: right;
    border: 1px solid green;
}

デモ： http： //jsfiddle.net/y5UEu/

score 2 · Accepted Answer

左のdivの前に右のdivを置くことができます。

<div class="box">   
    <div class="wrap">
        <div class="right">This should be right</div>  
        <div class="left">This should be left.</div>
    </div>

</div>

JSフィドル

score 2 · Accepted Answer

<div class="box">
  <div class="right">This should be right</div>
  <div class="wrap">
    <div class="left">This should be left.</div>
  </div>
</div>

score 1 · Accepted Answer

別の方法：

html構造を変更できない場合は、すでにそこにあるので
、いくつかのcssをwrapクラスに適用できます。

.wrap {
    width: 198px;
    float: left;
}

幅198pxはあなたの境界線に対応するためのものです。
要件を満たすために、これを好きなように変更できます。

.wrapクラスのfloatleftプロパティは、必要なものを提供します。

score 1 · Accepted Answer

これで試してみてください

これをCssコードに追加します：

    .wrap{

フロート：左;
}

HTML：

<div class="box">   
   <div class="right">This should be right</div>   
<div class="wrap">
    <div class="left">This should be left.</div>
</div>

score 1 · Accepted Answer

これを行うだけです

html

<div class="box">   
    <div class="wrap">
        <div class="left leftCol">This should be left.</div>
    </div>
     <div class="right">This should be right</div>    
</div>

css

.box{
    width: 300px;
    overflow: hidden;
    border: 1px solid red;    
}

.left{
    width: 100px;
    float: right;
    border: 1px solid blue;     
}

.right{
    width: 100px;
    float: right;
    border: 1px solid green;
}
.leftCol {
    float:left !important;
}

デモ

score 1 · Accepted Answer

簡単に定義します：

.left {float：left！important; }

これは既存のものに取って代わります.left {float:right;}

HTMLは変更できないと思いますので、これはカスタムCSSを既存のWebサイトに適用する状況で機能するソリューションです。

html - 右にフローティングdiv

6 に答える 6

Related

Reference