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

回答

相关问题