文本走出div

时间:2015-07-26 18:44:03

标签: css

文本走出div。我尝试过的任何东西似乎都能正常工作。例如从div中出来的单词red。

我有两个相邻的div,用绿色和红色边框显示.Div 1有来自数据库的图像。我命名为#index的Div 2包含div class ='board'蓝色边框,如图所示,其中包含来自MYSQL数据库的描述。

enter image description here

index.php上的代码:

 <div id="index">
 <?php
 $select = "SELECT * FROM products LIMIT 0,20";
 $query = mysqli_query ($conn,$select);

 while ($row = mysqli_fetch_assoc($query)){ 
 $B = $row['Brand']; $P = $row['Product']; $D = $row['Description'];
 $M = $row['Model'];$Id = $row['Id'];
 echo "<div class='board' style='word-wrap: break-word;'><a href =   
 'redirect.php?id=$Id'><h2>&nbsp &nbsp &nbsp 
 ".$B."&nbsp".$P."&nbsp".wordwrap($D,28,"<br>\n",TRUE)."&nbsp".$M."</h2>
 </a></div>"; 
 }
 ?>
 </div>

CSS:

 #index { 
          border:solid 1px red;
          position:relative;
          float:left;
          width:59%;
          height:100%;
          word-wrap:break-word;
 }

 div.board {
              width:480px;
 }

 .board {  
          background:white;
          position:relative;
          border-radius:15px;
          border-color:#0033FF;
          border-width:2px;
          border-style:solid;         
          margin-top:31px;
          width:480px;
          height:195px;
          padding-left:0px;
          margin-left:0px;
          word-wrap:break-word;
          white-space:normal;
  }

1 个答案:

答案 0 :(得分:0)

  <div id="index">
  <?php
  $select = "SELECT * FROM products LIMIT 0,20";
  $query = mysqli_query ($conn,$select);
  while ($row = mysqli_fetch_array($query)){ 
  $B = $row['Brand']; $P = $row['Product']; $D = $row['Description'];
  $M = $row['Model'];$Id = $row['Id'];
  echo "<div class='board' ><a href = 'redirect.php?id=$Id'>   
  <h2>".$B."&nbsp".$P."&nbsp".$D."&nbsp".$M."</h2></a></div>"; 
                                        }
  ?>
  </div>

CSS:

  #index { 
           position:relative;
           top:15px;
           float:left;
           width:482px;
           height:100%;
    }

 .board {  
      background:white;
      position:relative;
      border-radius:15px;
      border-color:#0033FF;
      border-width:1px;
      border-style:solid;       
      margin-top:29px;
      height:198px;
      padding-left:18px;
      padding-right:0px;
      margin-left:0px;
      float:left;
      word-wrap: break-word;
    }