Question

我有以下内容：

enter image description here

而不是2个单独的边框导致对齐问题（你可能会告诉我）我想放一个跨越第一个左边div的长边框并继续进入第二个更大的div，因此很清楚哪个描述属于哪个组。

以下是我目前正在使用的内容：

<DIV ID="sideleftsmall">
      <h2>Name of Group</h2>
      <br />
      <span class='border'>Centennial College Dance Group</span>
      <br /><br /><br />
      <span class='border'>Basketball Group</span>
      <br /><br /><br />
      <span class='border'>Weight Loss Group</span>
      <br /><br /><br />
      <span class='border'>Asian Social Group</span>
      <br />
      <span class='border'>LGBTQ Group</span>
      <br />
      <span class='border'>Study Group - Math 185</span>
      <br />
      <span class='border'>Study Group - Web</span>
      <br />
      <span class='border'>Study Group - Linux</span>
    </DIV>
        <DIV ID="content">
          <h2 class='alted' style='margin-top: -4.9%; margin-bottom: 3%;'>Description</h2><br />
          <p class='border alted'>Centennial College Dance Group provides the opportunity for dancers, fanatics and coaches who enjoy all kinds of dance to participate in dance events every week catering to various levels of media involving dance. <br />Centennial College Dance Group programs and volunteer activities are funded and supported by the Scarborough Dance Recreation Parks and Wildlife Foundation, membership fees, user fees, corporate sponsors and fund raising activities.</p>
          <br /><br />
          <p class='border alted'>Thursdays at the gym open time we book a court – need at least 6 people for pick-up games.</p>
          <br /><br /><br />
          <p class='border alted'>Meet in gym – work out in groups of 3 or 4.  Arrange times/events on our site.</p>
        </DIV>
      </DIV>

正如您所看到的，我目前正在使用断行来对齐，这会导致很多问题。

做表会导致这个：

enter image description here

我如何正确对齐和调整大小？

Answer 1

这是一个很好的基本设置，没有css类，你的一些数据可以帮助你开始制作你的表。希望能帮助到你。如果你将表包含在一个div中，它看起来很漂亮。
html5不支持表边框。

<div id="sideleftsmall">
<table border="1">
<tr>
  <th>Name of group</th>
  <th>Description</th>    
</tr>
<tr>
  <td>Centennial College Dance Group</td>
  <td>Centennial College Dance Group provides the opportunity for dancers, fanatics and coaches who enjoy all kinds of dance to participate in dance events every week catering to various levels of media involving dance. <br />Centennial College Dance Group programs and volunteer activities are funded and supported by the Scarborough Dance Recreation Parks and Wildlife Foundation, membership fees, user fees, corporate sponsors and fund raising activities.</td>    
</tr>
<tr>
  <td>Basketball Group</td>
  <td>Thursdays at the gym open time we book a court – need at least 6 people for pick-up games.</td>    
</tr>
<tr>
  <td>Weight Loss Group</td>
  <td>Meet in gym – work out in groups of 3 or 4.  Arrange times/events on our site.</td>
</tr>
</table>
</div>

Answer 2

是的，您的<br>和<span>标签使这个问题变得更加困难。我建议用<ul>

替换它们

<DIV ID="sideleftsmall">
      <h2 class="title">Name of Group</h2>
      <ul>
      <li class='border'>Centennial College Dance Group</li>
      <li class='border'>Basketball Group</li>
      <li class='border'>Weight Loss Group</li>
      <li class='border'>Asian Social Group</li>
      <li class='border'>LGBTQ Group</li>
      <li class='border'>Study Group - Math 185</li>
      <li class='border'>Study Group - Web</li>
      <li class='border'>Study Group - Linux</li>
    </ul>
    </DIV>

就您的对齐问题而言，您需要确保两个容器（#sideleftsmall和#content）具有相同的顶部填充和上边距。您还需要确保同时设置<h2>个style=""标记。这意味着您需要远离内联.title { padding: 5px; margin: 0; } #sideleftsmall ul { list-style-type: none; margin: 0; padding: 0 0 0 5px; /*align with header*/ } #sideleftsmall ul li { padding: 3px 0; }并为其分配相同的类。

这是一些以

开头的CSS

{{1}}

Answer 3

如果我们在这种情况下谈论语义代码，我们应该使用Definition List （请查看以下原因）。首先，让我们看一下 DEMO 。

这里有一个小描述为什么我们应该在这里使用Definition List？

<dl>: Container
<dt>: Definition Term (like a title)
<dd>: Definition Description

以下是用于对齐项目的CSS代码。

* {
 padding:0;
  margin:0;
}
dl {
 width:100%;
 overflow:hidden;
 background:#f5f5f5;
  clear:left;
}

dt, dd
{float:left; 
  min-height:70px; /* will work till you know the max height of dd i.e. definition*/
border-bottom:1px solid #999;
width:50%;
  padding:15px 0;
}
dd{width:50%;}

更新版本检查 DEMO

上述方法的问题是没有响应，即在调整浏览器大小时布局制动。这可以通过添加一个额外的标记并在div中包装dt和dd来解决。

新的CSS代码

dl > div {
  display: table-row;
  width:100%;
 overflow:hidden;
 background:#f5f5f5;

}
dl > div > dt {
  display: table-cell;
   min-height:70px; 
  width:50%;
   padding:15px 0;
  border-bottom:1px solid #999;

}
dl > div > dd {
  display: table-cell;
  width:50%;
   padding:15px 0;
  border-bottom:1px solid #999;
}

HTML代码

<dl>
   <div>
      <dt>Centennial College Dance Group</dt>
        <dd>And instead of 2 separate borders which causes alignment issues (As you can probably tell) I want to put a long border which spans the first left div and continues into the second bigger div so it's clear which description belongs to which group.
        </dd>
    </div>
</dl>

注意：但是这个技巧会有用，直到你知道max height的{{1}}，即如果你知道有多少内容将在dd。

2个DIV之间的水平边界

3 个答案: