SEE THIS FIDDLE

Question

我在浏览php的网页时遇到了麻烦。主div内的2个div继续被包裹。我试图安排它的方式是步枪手蓝色在左边，步枪手红色在页面的右边，因为用户将比较两个步枪兵的统计数据。我对CSS并不擅长，但是如果它是唯一的解决方案，我将会推动自己，因为我的脖子已经很疼，但仍然无法找到办法。我的目标浏览器只是FF和Chrome。我需要一种方法在页面上的一行显示2，而不是在第一个div下面的第二个div。

<?php
$profpic = "darkbg.jpg";
?>

<html>

<style type="text/css">
body {
background-image: url('<?php echo $profpic;?>');
}
</style>

<body>
<img src="headergiflong.gif" style="width:100%;height:30%;"><br>

<div>
<div style="display:inline;width:200;height:300;background-color:blue;">
<select id="comparea">
  <option value="rifleman.php">Rifleman</option>
  <option value="mortarman.php">Mortarman</option>
  <option value="machinegunner.php">Machine Gunner</option>
  <option value="javelin.php">Javelin</option>
</select>
<br>
<iframe id="compare1" style="background-color:black; color:white; border:0;" src="rifleman.php" width="45%" height="300"></iframe>
</div>

<br>

<div style="display:inline;width:200;height:300;background-color:red;">
<select id="compareb">
  <option value="rifleman.php">Rifleman</option>
  <option value="mortarman.php">Mortarman</option>
  <option value="machinegunner.php">Machine Gunner</option>
  <option value="javelin.php">Javelin</option>
</select>
<br>
<iframe id="compare2" style="background-color:black; color:white; border:0;" src="rifleman.php" width="45%" height="300"></iframe>
</div>
</div>

</body>
</html>

Answer 1

变化：

<body>
  <img src="headergiflong.gif" style="width:100%;height:30%;"><br>    
  <div>

要：

<body>
  <img src="headergiflong.gif" style="width:100%;height:30%;"><br>    
  <div style='width:400px;overflow:hidden;'>

基本问题是这两个项目设置为内联显示，固定宽度为200px - 因此，如果可用空间小于400px，它们将换行到新行。通过将父容器的宽度设置为400px，可以确保子容器具有可用的最小宽度，以便显示在同一行上。

您的替代方案是浮动这两个元素，或使用display:table

SEE THIS FIDDLE

..您可以使用三种不同的方法。

Answer 2

试试这个

<?php
$profpic = "darkbg.jpg";
?>

<html>

<style type="text/css">
body {
    background-image: url('<?php echo $profpic;?>');
}
</style>

<body>
    <img src="headergiflong.gif" style="width:100%;height:30%;"><br>

    <div style="width: 100%; max-width: 960px;">
        <div style="width: 50%; float: left; background-color:blue;">
            <select id="comparea">
                <option value="rifleman.php">Rifleman</option>
                <option value="mortarman.php">Mortarman</option>
                <option value="machinegunner.php">Machine Gunner</option>
                <option value="javelin.php">Javelin</option>
            </select>
            <br>
            <iframe id="compare1" style="background-color:black; color:white; border:0;" src="rifleman.php" width="100%" height="300"></iframe>
        </div>

        <div style="width: 50%; float: left; background-color:red;">
            <select id="compareb">
                <option value="rifleman.php">Rifleman</option>
                <option value="mortarman.php">Mortarman</option>
                <option value="machinegunner.php">Machine Gunner</option>
                <option value="javelin.php">Javelin</option>
            </select>
            <br>
            <iframe id="compare2" style="background-color:black; color:white; border:0;" src="rifleman.php" width="100%" height="300"></iframe>
        </div>
        <div style="clear: both;"></div>
    </div>

</body>
</html>

Answer 3

为两个div提供iframe width as 100% ...

并且对于左侧div将样式设为

float:left;
width:49%;

右边的

将样式设为

float:right;
width:49%;

如何防止php html中的div包装

3 个答案:

SEE THIS FIDDLE