我在使用php的網頁時遇到了問題，主div內的2個div不斷被包裹。我試圖按照步槍手藍色在左側，步槍手紅色在頁面右側的方式進行排列，因爲用戶將比較兩個步槍手的屬性。我對CSS並不擅長，但是如果它是唯一的解決方案，那麼我就會推動自己，因爲我的脖子已經傷到了這麼糟糕，仍然無法找到辦法做到這一點。我的目標瀏覽器只是FF和Chrome。我需要一種方法使2顯示在頁面上的一行，而不是使第二格下面的第二格。如何防止在div中打包php html

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

2013-12-17 Jay

試試這個

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

來源

2013-12-17 10:03:29

謝謝，浮在兩個div工作！ – Jay

變化：

<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

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

來源

2013-12-17 10:00:17 SW4

謝謝，漂浮在兩個d ivs工作！ – Jay

給IFRAME width as 100%兩個div的...

和左格給風格

float:left; 
width:49%;

右DIV給予風格

float:right; 
width:49%;

來源

2013-12-17 10:14:47 radha

如何防止在div中打包php html

回答

SEE THIS FIDDLE

相關問題