html - 将 div 中表单的宽度设置为其父级的最大宽度

Question

我有以下 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 宽(这意味着如果屏幕至少有 1000px 宽)，则 form 内左浮动 div 最大宽度为 500px，将占用 500 px，但是，如果屏幕宽度小于 1000 px，例如 800，form 将只占用 400 像素，作为其父级的宽度？

这里还有一个 fiddle : https://jsfiddle.net/f864b29a/

Answer 1

不太确定，但也许这就是您想要的:

<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>