Question

在更宽的屏幕分辨率上，小部件区域2和3之间的间隙明显大于小部件区域1和2之间的间隙，使得3个区域看起来不均匀。

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
    width: 332px;
}

.footer-widgets-1 {
margin-right: 36px;
}

.footer-widgets-1,
.footer-widgets-2 {
    float: left;
}

.footer-widgets-3 {
    float: right;
}

使用float时，有没有办法确保所有3个之间的间距均匀：左上和左右一个浮动：对吧？

Answer 1

  <div class="widget-group">

     <div class="footer-widgets-1">
     </div>
     <div class="footer-widgets-2">
     </div>
     <div class="footer-widgets-3">
     </div>

  </div>
.widget-group
{
     width: 1068px;
     margin: 0 auto;
     display: block;
     overflow: hidden;
}
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
    width: 332px;
    margin-right: 36px;
    float: left;
}

.footer-widgets-3 {
  margin-right: 0px;
}

Answer 2

您可能需要尝试在此处使用“表格”。表格显示可用于您希望控制每列宽度的情况。

很难提供您需要的确切解决方案，但类似下面的内容应该对您有所帮助。

构建小部件以使其显示为表格。

<div id="tableContainer"> <!-- Serves as a container for the whole table -->
  <div id="tableRow"> <!-- We have only one row in this table, which has 3 columns, one for each widget. -->  
    <div class="footer-widgets-1"></div> <!-- First column. -->
    <div class="footer-widgets-2"></div> <!-- Second column. -->
    <div class="footer-widgets-3"></div> <!-- Third column. -->
  </div> <!-- End row. -->
</div> <!-- End table. -->

应用样式以将小部件显示为表格中的表格单元格。

#tableContainer {
  display: table;
}

#tableRow {
  display: table-row;
}

#footer-widgets-1, #footer-widgets-2, #footer-widgets-3 {
  display: table-cell;
  vertical-align: top; /* Vertically aligns the content within each table cell at the top of the cell. */
  width: 33%; /* Set each table cell to approximately one-third of the total width of the page. */
}

/* Any other styles specific to each widget go here... */

希望这适合你。

宽屏幕上的CSS浮动对齐不均匀

2 个答案: