css - 窗口缩小时保持 CSS 元素内联

Question

当我缩小页面时，我有一个表单不会保持对齐。 div2 将移到左侧并侵入 div1，按钮位置变得困惑。我一直在阅读 css，并认为要走的路是为我的输入类型制作一个包装器 div，然后制作两个子 div，但它似乎不起作用。我已经尝试了各种我发现都无济于事的事情。理想情况下，我希望所有元素都按比例缩小，并在窗口缩小时保持对齐。如果没有，我至少希望元素随着滚动条缩小而从屏幕上消失。非常感谢任何帮助。

HTML:

<form action="updated_tt.php" method="post">
<input type="hidden" name="ud_id" value="<?php echo $id; ?>" />

<div id="wrap">
  <div id="div1">
    &nbsp;
    &nbsp;
    &nbsp;
   Trouble Report/Request:<br/>
    <textarea  class="tt_fld5" name="ud_problem" maxlength="300" rows="3" wrap=HARD ><?php echo $problem; ?></textarea> <br/>
  </div>

  <div id="div2">
    &nbsp;
    &nbsp;
    &nbsp;
   Action Taken: <br/>
      <textarea  class="tt_fld5" name="ud_act_tkn" maxlength="300" cols="40" rows="3" wrap=HARD ><?php echo $act_tkn; ?></textarea>
  </div>
</div>
<br/>
<br/>



<?php
/* Here we create an array of the drop down list choices, then go thru the array one by one and check for the "selected" attribute.
   If the value retrieved from MySQL equals the ddown_options array element then construct <option> line with the "selected" value, else construct
   a normal <option> line. Note We have to Make this a form here.*/

$option_to_preselect = $tkt_status;

$ddown_options = array
(
   'Open',
   'Referred',
   'Closed',
);
echo  '<span class=tt_fld>Ticket Status: ' . '</span>' . '<br />';
$arrlength=count($ddown_options);

print '<select name="ud_ticket_status" id="input_select">';

for ($x=0;$x<$arrlength;$x++)
{

    if ($ddown_options[$x] == $option_to_preselect)
    {
        print '    <option value="' . $ddown_options[$x] . '"' . ' selected="selected">' . $ddown_options[$x] . '</option>';

    }

    else {
            print '    <option value="' . $ddown_options[$x] . '">' . $ddown_options[$x] . '</option>';

          }

}
print '</select>';

echo '<br />';
echo '<br />';

/* For Assigned Tech...*/

echo  '<span class=tt_fld>Assigned To: ' . '</span>' . '<br />';

$option_to_preselect = $assgnd_tech;

$ddown_options = array
(
    'Unassigned',
    '***',
    '***',
    '***',
    '***',
);

$arrlength=count($ddown_options);

print '<select name="ud_assgnd_tech" id="input_select">';

for ($x=0;$x<$arrlength;$x++)
{

    if ($ddown_options[$x] == $option_to_preselect)
    {
        print '    <option value="' . $ddown_options[$x] . '"' . ' selected="selected">' . $ddown_options[$x] . '</option>';

    }

    else {
            print '    <option value="' . $ddown_options[$x] . '">' . $ddown_options[$x] . '</option>';

          }

}
print '</select>';



?>

<br />

<center><button type="submit" class="btn btn-primary btn-lg" onclick="updated.php">Update Trouble Ticket</button></center>
<br />


<!-- Indicates a dangerous or potentially negative action -->

<center><button  type="button" class="btn btn-danger" onclick="Del_Function()">Delete Trouble Ticket</button></center>

</form>

CSS:

#wrap {
    overflow: hidden;
    padding: 2px 0 0 0;
    width: 94%;
    margin: 25 auto;
}

#div1 {
    font-weight: bold;
    font: x-large serif;
    font-weight: bold;
    float: left;
    width: 47%;
    margin-top: 10px;

}

#div2 {
    font: large serif;
    float: right;
    width: 47%;
    margin-top: 10px;
    font-weight: bold;
    font-size: x-large;
}

Answer 1

float 属性专门用于允许内容根据页面尺寸围绕 block 内容流动。不要 float 你的内容 div，尝试相对定位。