内部的div对齐

时间：2015-06-26 11:35:39

标签： jquery html css

你好我在。

里面有一个div对齐问题

我做了一个小小的小提示来表明问题。 https://jsfiddle.net/jpq7xzoz/

我使用jQuery tablesort-Plugin并在第二个div中显示标题中的一些按钮。对于例如用于显示/隐藏过滤器的搜索图标。 

<th class="header" style="text-align: center">
     <div class="header-inner">Patchlevel</div>
     <div class="header-inner-filter">
          <button class="filterButton"></button>
     </div>
</th>

但是当列具有不同的大小时，表格会使用自动调整大小的cols和div，并将按钮换行到新行。但是头部描述应该与按钮和背景图像在同一行。

当我按照与描述相同的div中的按钮时，它们在同一行，但我无法在右栏设置按钮。

我尝试使用不同的显示样式和空间属性，但没有成功。

我该怎么办？

Thx Felix

4 个答案:

答案 0 :(得分：3)

您可以使用display: table-cell代替floats：

＆＃13;
＆＃13; 
table {
  background-color: #fff;
  margin: 10px 0 15px;
  text-align: left;
}
.header {
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
  background-repeat: no-repeat;
  background-position: center right;
  padding: 4px 18px 4px 4px;
  white-space: nowrap;
  cursor: pointer;
}
.header-inner-filter {
  display: table-cell;/*remove float and add table-cell*/
  height: 20px;
  vertical-align: middle;
}
.header-inner {
  display: table-cell;/*remove float and add table-cell*/
}
.filterButton {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAAXNSR0ICQMB9xQAAAAlwSFlzAAAXEgAAFxIBZ5/SUgAAABl0RVh0U29mdHdhcmUATWljcm9zb2Z0IE9mZmljZX/tNXEAAADuSURBVDjLnZShDsIwEIYnJyeRSByTyEkkElm5x1jVJHJykkdAIieRk8hJJIIQuIbb8qfp9diWfO7v1/Z6t8RamyD0HYiauDInwvi5EChZERfiI9ARG1XGokdENPIkCk3mn6gh9m4hXxk3uhNpUMY1iu5M35oYIFdLskYLcdBg/STZDUJFRJbhDSRZD6E8IkuxrpLsDKEyIttBrpdkJYRckTMh2EGulWQZP/e0q2sLCOSe6CU177ig+KNhkUobp6MyBW9N6N/ZjVXrvfDAj7QNTEolytS/wq89ROEsmSacLYsI80WygNAsPpknnHryC/EXoeLKpmsfAAAAAElFTkSuQmCC');
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  border: none;
  background-color: Transparent;
  cursor: pointer;
}
table,
th,
tr,
td {
  border: 1px solid;
  border-collapse: collapse;
  margin-top: 3px;
  margin-bottom: 3px;
}
＆＃13; 
<table>
  <THEAD>
    <tr>
      <th class="header" style="text-align: center">
        <div class="header-inner">Patchlevel</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
      <th class="header" style="text-align: center">
        <div class="header-inner">Patcheintrag</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
      <th class="header" style="text-align: center">
        <div class="header-inner">Informationen</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
      <th class="header" style="text-align: center">
        <div class="header-inner">Handulungsempfehlung</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
    </tr>
  </THEAD>
  <TBODY>
    <tr>
      <td style="text-align: center">3</td>
      <td style="text-align: center">1</td>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
    </tr>
  </TBODY>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

将.header-inner和.header-inner-filter设为display:inline-block 

table {
  background-color: #fff;
  margin: 10px 0 15px;
  text-align: left;
}
.header {
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
  background-repeat: no-repeat;
  background-position: center right;
  padding: 4px 18px 4px 4px;
  white-space: nowrap;
  cursor: pointer;
}
.header-inner-filter {
  display: inline-block;
  height: 20px;
  padding-left: 50px;
}
.header-inner {
  display: inline-block;
}
.filterButton {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAAXNSR0ICQMB9xQAAAAlwSFlzAAAXEgAAFxIBZ5/SUgAAABl0RVh0U29mdHdhcmUATWljcm9zb2Z0IE9mZmljZX/tNXEAAADuSURBVDjLnZShDsIwEIYnJyeRSByTyEkkElm5x1jVJHJykkdAIieRk8hJJIIQuIbb8qfp9diWfO7v1/Z6t8RamyD0HYiauDInwvi5EChZERfiI9ARG1XGokdENPIkCk3mn6gh9m4hXxk3uhNpUMY1iu5M35oYIFdLskYLcdBg/STZDUJFRJbhDSRZD6E8IkuxrpLsDKEyIttBrpdkJYRckTMh2EGulWQZP/e0q2sLCOSe6CU177ig+KNhkUobp6MyBW9N6N/ZjVXrvfDAj7QNTEolytS/wq89ROEsmSacLYsI80WygNAsPpknnHryC/EXoeLKpmsfAAAAAElFTkSuQmCC');
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  border: none;
  background-color: Transparent;
  cursor: pointer;
  vertical-align: top;
}
table,
th,
tr,
td {
  border: 1px solid;
  border-collapse: collapse;
  margin-top: 3px;
  margin-bottom: 3px;
}
<table>
  <THEAD>
    <tr>
      <th class="header" style="text-align: center">
        <div class="header-inner">Patchlevel</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
      <th class="header" style="text-align: center">
        <div class="header-inner">Patcheintrag</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
      <th class="header" style="text-align: center">
        <div class="header-inner">Informationen</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
      <th class="header" style="text-align: center">
        <div class="header-inner">Handulungsempfehlung</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
    </tr>
  </THEAD>
  <TBODY>
    <tr>
      <td style="text-align: center">3</td>
      <td style="text-align: center">1</td>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
    </tr>
  </TBODY>
</table>

答案 2 :(得分：2)

开平！ 尝试使用负边距。 例如：

.header-inner {margin-right:50px;}
.header-inner-filter {margin-left:-40px;}

根据需要调整50px和-40px。

答案 3 :(得分：0)

为两个div更改一点CSS。

.header-inner-filter {
    height: 20px;
    display: inline-block;
    width: 25%;
    vertical-align: top;
    margin-left: 5px;
}
.header-inner {
    display: inline-block;
    width: 70%;
    vertical-align: top;
}

<强> FIDDLE

相关问题
最新问题