段落を浮動要素に揃える

Question

浮動小数点の周囲を流れる段落の上辺と左辺を整列させる正確な方法はありますか？私がズームインして開発者ツールを使用するとき、それらは完全に整列されていませんが、非常に近いです。

http://codepen.io/BennyHH/pen/mPBEvG

* { 
 
     box-sizing: border-box; 
 
    } 
 
    .contain { 
 
     width: 500px; 
 
     margin: 0 auto; 
 
     background-color: silver; 
 
    } 
 
    .box { 
 
     width: 200px; 
 
     height: 100px; 
 
     background: blue; 
 
     float: left; 
 
     margin: 15px 15px 0; 
 
    } 
 
    p { 
 
     padding: 15px; 
 
    }

<section class="contain"> 
 
    <div class="box"></div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> 
 
</section>

Answer 1

それはそのように動作することができます。

* { 
 
     box-sizing: border-box; 
 
    } 
 
    .contain { 
 
     width: 500px; 
 
     margin: 0 auto; 
 
     background-color: silver; 
 
    } 
 
    .box { 
 
     width: 200px; 
 
     height: 100px; 
 
     background: blue; 
 
     float: left; 
 
     margin: 15px 15px 0; 
 
    } 
 
    p { 
 
     padding: 15px; 
 
     width: calc(100% - 215px); 
 
     margin-left: 215px; 
 
    }

<section class="contain"> 
 
    <div class="box"></div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> 
 
</section>

Answer 2

ちょうどそれは* *行うことができますが、すべての文字は、段落内の別のスペースをとるように、それは強くお勧めしますタグ

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.contain { 
 
    width: 500px; 
 
    margin: 0 auto; 
 
    background: silver; 
 
} 
 

 
.box { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: blue; 
 
    float: left; 
 
    margin: 15px 15px 0; 
 
} 
 

 
p { 
 
    padding: 13px 15px; 
 
    overflow: hidden; 
 
    /* text-align: justify; */ 
 
}

<section class="contain"> 
 
    <div class="box"></div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> 
 
</section>