2016-10-18 6 views
0

です:セットの幅は、それの最大幅に私は次のHTMLコードを持つ親

<div style='float: left; width: 50%; background-color: #00243c;'> 
    <div style='float:right; max-width: 500px;'>    
     Lorem ipsum dolor sit amet, est montes vitae. Auctor ipsum nam est, phasellus id condimentum facilisis. Aliquam sem, pede nec ante. Magnis phasellus mi neque, nullam quis lobortis, tristique adipiscing at. Amet arcu, donec sodales elit quis odio, suspendisse pede natoque amet leo, ipsum ac vivamus, amet fusce eget. Tortor augue eget montes metus nullam. 
    </div> 
</div> 
<div style='float: left; width: 50%; background-color: white;'> 
    <div style='float: left; max-width:500px;'> 
     <form style='width:100%;'> 
     <input type='text' value='test' style='width:100%'> 
     </form> 
    </div> 
</div> 

にはどうすればformが常に許可された最大を取るだろうことを、確認することができます親の幅はdivです。第二主divが少なくとも500pxなど広い場合、左内部formは500pxなどの最大幅とdivを浮かべ

したがって、例えば、(スクリーンが少なくとも1000px幅であることがあれば、その手段)、かかります画面の幅が1000ピクセル未満の場合は、800ピクセルの場合、formは親の幅として400ピクセルしか使用しません。

ここもフィドルです: https://jsfiddle.net/f864b29a/

+0

フォームは、それの親の幅を_is_。あなたがそれを浮かべているので、親の幅は崩壊しています。 https://jsfiddle.net/f864b29a/2/ – Turnip

答えて

1

あなただけのラッピングからフロートを削除する必要がありますdiv、それは浮動してはならないので、あなたが望むように左に固執し、最大500ピクセルで拡大します。しかし、私はこの構造が妥当なレイアウトであるとは思っていません。

https://jsfiddle.net/f864b29a/4/

<div style='max-width:500px;'> 
    <form style='width:100%;'> 
    <input type='text' value='test' style='width:100%'> 
    </form> 
</div> 
2

本当にわからないが、多分これはあなたが望むものである:

<div style='float: left; width: 50%; background-color: #00243c;'> 
 
    <div style='float:right; max-width: 500px;'>    
 
     Lorem ipsum dolor sit amet, est montes vitae. Auctor ipsum nam est, phasellus id condimentum facilisis. Aliquam sem, pede nec ante. Magnis phasellus mi neque, nullam quis lobortis, tristique adipiscing at. Amet arcu, donec sodales elit quis odio, suspendisse pede natoque amet leo, ipsum ac vivamus, amet fusce eget. Tortor augue eget montes metus nullam. 
 
    </div> 
 
</div> 
 
<div style='float: left; width: 50%; background-color: orange;'> 
 
    <div style='float: left; width: 100%; max-width:500px;'> 
 
     <form style='width:100%;'> 
 
     <input type='text' value='test' style='width:100%'> 
 
     </form> 
 
    </div> 
 
</div>

関連する問題