在div中设置窗体的宽度，以达到其父级的最大宽度。

I have the following html code:

我有以下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>

How can I make sure, that the form will always take up the maximum allowed width of it's parent div.

如何确保表单总是占用父div的最大允许宽度。

So, for example, if the second main div is at least 500px wide(that means if that the screen is at least 1000px wide), the form inside the left floated div with a max-width of 500px, will take up 500 px, BUT, if the screen width is less then 1000 px, let's say for example 800, the form will only take up 400 px, as the width of it's parent?

所以,例如,如果第二个主要div至少是500 px宽(这意味着如果屏幕至少是1000 px宽),左内的形式提出div max-width 500 px,将500 px,但是,如果屏幕宽度小于1000 px,例如800,只会占用400 px,它的母公司的宽度?

Here's a fiddle also: https://jsfiddle.net/f864b29a/

这里还有一个小提琴:https://jsfiddle.net/f864b29a/。

2 个解决方案

#1

You just have to remove the float from the wrapping div, because it just shouldn't float, It will stick to the left as you wish and will expand at max of 500 pixels. Yet I don't find this structure as a reasonable layout, just my thought.

你只需要从包装div中移除浮动，因为它不应该浮动，它会按照你的愿望向左移动，并以最大500像素的速度扩展。然而，我并不认为这种结构是合理的布局，只是我的想法。

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

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

Not realy sure, but maybe this is what you want:

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

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