Rectangle div在某些屏幕下关闭屏幕：

Question

我有一些矩形div，适用于大屏幕和笔记本电脑，但在笔记本电脑上关闭屏幕（如果宽度大于100％），这就是它在大屏幕上的外观：

但它在笔记本电脑上看起来像这样：

这是代码

CSS：

.table{
 border: 1px solid black ;
}

#image{
 float:right;
 margin-top:25px;
 margin-right:5px;
}

HTML：

<div class="table">

<?php $arrivename = OperationsData::getAirportInfo($route->arricao);?>



<div id="image">
    <?php echo '<img src="'.fileurl('/airlines/'.$route->code.'.png').'" alt="'.$airline->name.'" />'; ?>
</div>

    <h4 style="font-size:21px;color:#FF9600;top:0px;margin: 0 !important;"><?php echo $route->code . $route->flightnum?></h4>
    <p style="font-size:12px;padding-top: 4px !important;padding-left:2px !important;"><?php echo $route->depicao ;?> -> <?php echo $route->arricao;?> (<?php echo $arrivename->name;?>)</p>

    <p style="font-size:12px;padding-top: 4px !important;padding-left:2px !important;"><?php echo $route->aircraft ;?></p>

        <a href="<?php echo url('/schedules/brief/'.$route->id);?>"><input id="generate" type="button" value="Generate Briefing"></a>
        <br>



</div> 

Answer 1

您可以尝试以下代码：

.table {
  border: 1px solid black;
  box-sizing:border-box;
}
#image {
  border: 1px solid black;
  float: right;
  margin-top: 25px;
  margin-right: 5px;
  width: 500px;
  height: 20px;
}
h4 {
  font-size: 21px;
  color: #FF9600;
  top: 0px;
  margin: 0 !important;
}
p {
  font-size: 12px;
  padding-top: 4px !important;
  padding-left: 2px !important;
}

<div class="table">



  <div id="image">Hello</div>

  <h4>Hello</h4>

  <p>Hello</p>

  <p>Hello</p>

  <a href="">
    <input id="generate" type="button" value="Generate Briefing">
  </a>



</div>