Как предотвратить div-упаковку в php html

Question

Как предотвратить div-упаковку в php html

0

У меня возникают проблемы с веб-страницей в php, которую я пытаюсь сделать. 2 divs внутри главного div продолжали обматываться. Я пытаюсь организовать его таким образом, чтобы стрелок синего был слева, а стрелок красного цвета находится справа от страницы, так как пользователь будет сравнивать статистику обоих стрелков. Я плохо разбираюсь в CSS, но буду настаивать, если это единственное решение, так как моя шея уже болит так плохо и все еще не может найти способ сделать это. Мои целевые браузеры - это только FF и Chrome. Мне нужен способ сделать 2 отображаемым в одной строке на странице, а не сделать второй div ниже 1-го 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>

Jay 17 дек. 2013, в 11:36

Источник

Теги:

php

html

css

3 ответа

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, они будут смещаться на новую строку. Установив ширину родительского контейнера на 400 пикселей, он гарантирует, что у детей будет минимальная ширина, доступная для отображения на одной строке.

Ваши альтернативы были бы либо для размещения двух элементов, либо для использования display:table

СМОТРЕТЬ ЭТО FIDDLE

.. для трех разных подходов, которые вы можете использовать.

SW4 17 дек. 2013, в 08:22

0

Спасибо, плавающий на обоих div работал!
Jay 17 дек. 2013, в 10:15

0

укажите width as 100% iframe width as 100% для обоих div...

и для левого div укажите стиль как

float:left;
width:49%;

для правого div дайте стиль, как

float:right;
width:49%;

radha 17 дек. 2013, в 09:00

Ещё вопросы

Спасибо, плавающий на обоих div работал!

Fabian Marz · Accepted Answer · 2013-12-17T08-57-00.000Z

попробуй это

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

Спасибо, плавающий на обоих div работал!