ラップされたテキストのレスポンシブテーマの垂直整列された浮動小数点divs

Question

オンライン整列のためのソリューションがたくさんあることを実感しました。残念ながら、浮動小数点ボックスのワードラップは、

浮動小数点のドキュメントのフッターは、シンプルな「著作権会社」を残していて、アップルの製品を小冊子で言及するための必要条件を浮かべています - この情報は、応答サイズの画面が小さくなるにつれてそれはdivが大きくなり、左に浮かぶ要素が途中で停止するのを止めます - コードが混乱するほど、混乱して失われます！ここで私は今のところ...（.footendはワードラップが開始されるまで働いていた別の場所で見つかったアイデアを展開しようとする試みがあったので、おそらく一緒にすべて削除することができます）持っているものである

<div id="Footer"> 
<!-- FOOTER --> 
<div class="content-inner footend"> 
      <div class="left">© Company 2016</div> 
      <div class="right"> 
<img src="http://update.s3-eu-west-1.amazonaws.com/images/apple-logo.png" alt="Apple Logo" style="width:8px;"> 
Apple Logo, Mac, OS X, iPhone, iMac, Mac mini, Mac Pro, MacBook, MacBook Pro, MacBook Air, iOS, MacApp and Retina are trademarks of Apple Inc., registered in the U.S. and other countries. 
    </div> 
</div> 
<div class="clr"></div> 
<!-- 'FOOTER --> 
</div> 

CSS

.content-inner { 
margin: 0 auto; 
max-width: 840px; 
width: 100%; 
} 

.content-inner-600 { max-width: 600px; } 
.content-inner-620 { max-width: 620px !important; border: 0px solid red; } 

.footend {} 
.footend:before { 
content: ''; 
display: inline-block; 
height: 100%; 
vertical-align: middle; 
margin-right: -0.25em; /* Adjusts for spacing */ 
} 

#Footer { 
background: #ef4935 !Important; 
color: #fff; 
font-family:'ProximaNova', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; 
padding: 15px 0; 
} 

#Footer .left {float: left; width: 30%; font-size: .77em; margin-top:2px; display: inline-block;vertical-align: middle; position: absolute;} 
#Footer .right {float: right; width: 40%; font-size: .6em !important; line-height: 1em; margin: 0px 20px 0 0; font-weight: 200 !important; text-align: justify; display: inline-block; vertical-align: middle;} 

Answer 1

floatを削除するだけで、position: absoluteが得られます。 left/.right適切な計算幅、垂直センタリングが機能します。

もう一つの方法は、flexbox

.content-inner { 
 
    margin: 0 auto; 
 
    max-width: 840px; 
 
} 
 

 
.content-inner-600 { max-width: 600px; } 
 
.content-inner-620 { max-width: 620px !important; border: 0px solid red; } 
 

 
.footend {} 
 
.footend:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    margin-right: -0.25em; /* Adjusts for spacing */ 
 
} 
 

 
#Footer { 
 
    background: #ef4935 !Important; 
 
    color: #fff; 
 
    font-family:'ProximaNova', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; 
 
    padding: 15px 0; 
 
} 
 

 
#Footer .left {width: calc(50% - 4px); font-size: .77em; margin-top:2px; display: inline-block;vertical-align: middle; } 
 
#Footer .right {width: calc(50% - 24px); font-size: .6em !important; line-height: 1em; margin: 0px 20px 0 0; font-weight: 200 !important; text-align: justify; display: inline-block; vertical-align: middle;}

<div id="Footer"> 
 
    <!-- FOOTER --> 
 
    <div class="content-inner footend"> 
 
    <div class="left">© Company 2016</div> 
 
    <div class="right"> 
 
     <img src="http://placehold.it/50" alt="Apple Logo" style="width:8px;"> 
 
     Apple Logo, Mac, OS X, iPhone, iMac, Mac mini, Mac Pro, MacBook, MacBook Pro, MacBook Air, iOS, MacApp and Retina are trademarks of Apple Inc., registered in the U.S. and other countries. 
 
    </div> 
 
    </div> 
 
    <div class="clr"></div> 
 
    <!-- 'FOOTER --> 
 
</div>