溢出文本不對齊

Question

我是新的HTML和CSS，這可能是一個微不足道的問題。 我使用這個代碼：

的html代碼：

<div class="container" > 

    <div class="row"> 
    <fieldset class="for-panel"> 
     <legend>Project Info</legend> 
     <div class="row"> 
     <div class="col-sm-6"> 
      <div class="form-horizontal"> 
      <label class="col-xs-5 control-label">Name:</label> 
      <p class="form-control-static">Batman</p> 
      <label class="col-xs-5 control-label">Description: </label> 
      <p class="form-control-static">Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger,[4][5] and first appeared in Detective Comics #27 (1939). Originally named the "Bat-Man", the character is also referred to by such epithets as the Caped Crusader, the Dark Knight, and the World's Greatest Detective.[6]</p> 
     </div> 
     </div> 
     <div class="col-sm-6"> 
      <div class="form-horizontal"> 
      <label class="col-xs-4 control-label">Name: </label> 
      <p class="form-control-static">Joker </p> 


      <label class="col-xs-4 control-label">Description:</label> 
      <p class="form-control-static">The Joker is a fictional supervillain created by Bill Finger, Bob Kane, and Jerry Robinson who first appeared in the debut issue of the comic book Batman (April 25, 1940) published by DC Comics. Credit for the Joker's creation is disputed; Kane and Robinson claimed responsibility for the Joker's design, while acknowledging Finger's writing contribution. Although the Joker was planned to be killed off during his initial appearance, he was spared by editorial intervention, allowing the character to endure as the archenemy of the superhero Batman.</p> 
      </div> 
     </div> 
     </div> 
    </fieldset> 
    </div> 
</div> 

CSS代碼：

fieldset.for-panel { 
    background-color: #fcfcfc; 
    border: 1px solid #999; 
    border-radius: 4px; 
    padding:15px 10px; 
    background-color: #d9edf7; 
    border-color: #bce8f1; 
    background-color: #f9fdfd; 
    margin-bottom:12px; 
} 
fieldset.for-panel legend { 
    background-color: #fafafa; 
    border: 1px solid #ddd; 
    border-radius: 5px; 
    color: #4381ba; 
    font-size: 14px; 
    font-weight: bold; 
    line-height: 10px; 
    margin: inherit; 
    padding: 7px; 
    width: auto; 
    background-color: #d9edf7; 
    margin-bottom: 0; 
} 
#containerProjectInfo{ 

    margin-top: 1%; 
    width:90%; 


} 

這是結果image

，但它並不像我會工作。在文字溢出的描述中，行不是對齊的，而是從描述標籤的底部開始。 我試圖用ord-wrap: break-word但沒有結果。

謝謝

Answer 1

引導有12列，當你把他們，他們內部有另外12列。使用<div class="row">並正確地進行分欄，它應該沒問題。始終將容器/行內的部件分開。 我只修改了HTML代碼。 CSS不變！

這裏的HTML代碼：

<div class="container-fluid"> 
<div class="row"> 
    <fieldset class="for-panel"> 
     <legend>Project Info</legend> 
      <div class="row"> 
       <!-- First Column --> 
       <div class="col-xs-6"> 
        <div class="row"> <!-- name row --> 
         <div class="col-xs-2"> 
          <label>Name:</label> 
         </div> 
         <div class="col-xs-10"> 
          <p>Batman</p> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-xs-2"> 
          <label>Description: </label> <!-- description row --> 
         </div> 
         <div class="col-xs-10"> 
          <p>Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger,[4][5] and first appeared in Detective Comics #27 (1939). Originally named the "Bat-Man", the character is also referred to by such epithets as the Caped Crusader, the Dark Knight, and the World's Greatest Detective.[6]</p> 
         </div> 
        </div> 
       </div> 
       <!-- Second Column --> 
       <div class="col-xs-6"> 
        <div class="row"> <!-- name row --> 
         <div class="col-xs-2"> 
          <label>Name:</label> 
         </div> 
         <div class="col-xs-10"> 
          <p>Joker</p> 
         </div> 
        </div> 
        <div class="row"> <!-- description row --> 
         <div class="col-xs-2"> 
          <label>Description: </label> 
         </div> 

         <div class="col-xs-10"> 
          <p>The Joker is a fictional supervillain created by Bill Finger, Bob Kane, and Jerry Robinson who first appeared in the debut issue of the comic book Batman (April 25, 1940) published by DC Comics. Credit for the Joker's creation is disputed; Kane and Robinson claimed responsibility for the Joker's design, while acknowledging Finger's writing contribution. Although the Joker was planned to be killed off during his initial appearance, he was spared by editorial intervention, allowing the character to endure as the archenemy of the superhero Batman.</p> 
         </div> 
        </div> 
       </div> 
      </div>    
    </fieldset> 
</div> 

這應該可以解決您的問題，但我還刪除了類的名字，因爲它有一些填充它裏面也沒有對齊文本正確。你可以添加它並修復CSS。

希望這能幫助你。

約舉表更多的參考可以在這裏找到：Click Me

圖像預覽：