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会浮动{{1}最大宽度为500px，最大宽度为500像素，但如果屏幕宽度小于1000像素，让我们说例如800，div只占用400像素，作为它父母的宽度？

这里也是一个小提琴： https://jsfiddle.net/f864b29a/

Answer 1

不确定，但也许这就是你想要的：

＆＃13;

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

＆＃13;

Answer 2

你只需要从包装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>

将div内的表单宽度设置为其父级的最大宽度

2 个答案: