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属性专门用于允许内容根据页面维度在块内容中流动。而不是浮动你的内容div，尝试相对定位。

Answer 2

以下是仅供记录使用的CSS：

#wrap {
    overflow: hidden;
    padding: 2px 0 0 0;
    width: 1200px;
    min-height:150px;
    margin: 25 auto;
}


#div1  {
    font: large serif;
    font-weight: bold;
    position: relative;
    left: 10px;
    width: 300px;
    font-size: x-large;
    max-width:300px;
}


#div2  {
    font: large serif;
    font-weight: bold;
    font-size: x-large;
    position: relative;
    left: 600px;
    width: 300px;
    bottom:155px;
}

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

2 个答案: