CSS這種結構

我一直在努力了一段時間得到以下結構表玩，浮，對齊，相對位置/絕對...但沒有成功......CSS這種結構

做什麼CSS我需要得到它嗎？

我得到的最近的一直使用三行的表格，第二行有圖表和A:lalala，但是B顯示得太深到底部。

C:lololo (no chart title) 
------------ 
| chart |   A: lalalal 
|   |   B: lelelele 
|__________|

這與表

<table> 
       <tr> 
        <td> 
         <b>Check-in: </b> 
         <select id="dates" name="check_in" onchange="dynamicDates(this.value)"> 
         <option value="check_in_date">Date</option> 
         <?php echo $dates; ?> 
         </select> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <div style="max-width:400px" id="chart_div"</div> 
        </td> 
        <td> 
         <p><b>Bookings: </b><?php echo $n_bookings; ?></p> 
        </td> 
       </tr> 
       <tr> 
        <td></td> 
        <td> 
         <p><b>Nights: </b><?php echo $nights; ?></p> 
        </td> 
       </tr> 
      </table>

來源

2015-11-28 yzT

向我們展示你的HTML，請。僅供參考，表格不應用於佈局。有更好的方法。 –

@cale_b添加了我現在擁有的代碼，與表 – yzT

執行此操作的方法有很多種 - 如答案中所示。另一種方式可以在這個jsfiddle示例中看到https://jsfiddle.net/33abzr9j/ – jeff

版本爲了美麗，請不要使用表格排版萬物的愛。

因爲我們不知道你的佈局（除了表格，我們不會用這個答案），所以最好的方法是爭論什麼。這裏有大約十幾種不同的方法來解決這一解決方案之一：

jsfiddle

HTML：

<div> 
    <div class="chart_title">C: This is my title</div> 
    <div class="chart">Chart goes here</div> 
    <div class="extras"> 
     <div>A: This is row 1 to the right of chart</div> 
     <div>B: This is row 2 to the right of chart</div> 
    </div> 
</div>

CSS：

.chart_title { 
    font-weight: bold; 
} 

div.chart { 
    display: inline-block; 
    vertical-align: top; 
    width: 40%; 
    border: 1px solid blue; 
} 

div.extras { 
    display: inline-block; 
    vertical-align: top; 
    width: 58%; 
    border: 1px solid red; 
}

來源

2015-11-28 00:39:58

只是想問問爲什麼鼓勵不使用表格進行佈局？如何登記表格？表或系列的div？謝謝。我不是網頁設計師。 –

@FrancisSaul divs可以更容易地設計，可以移動響應，而且表格不能。如果您需要桌子，請使用表格 - 但CD有更好的解決方案。說到網格，bootstrap有一個非常好的預製。 –

可以利用float CSS屬性如下

HTML

<div id='outer'> 
    <p>Top Text</p> 
    <div class='contents'> 
     <div id='chart'>chart</div> 
    </div> 
    <div class='contents'> 
     <ul> 
      <li>abc</li> 
      <li>abc</li> 
     </ul> 
    </div> 
</div>

CSS

#outer { 
    width:300px; 
    height:200px; 
    background-color:yellow; 
} 

    .contents { 
     background-color:red; 
     float:left; 
     width:150px; 
     display:inline-block; 
    } 
    #chart { 
     background-color:green; 
     width:150px; 
     height:150px; 
    }

小提琴 https://jsfiddle.net/o0ztm1fd/

來源

2015-11-28 00:47:41

回答

相關問題