Question

这让我发疯了......有人可以告诉我为什么中心栏根本不会在左右两列之间居中？我正试图在中间列上使用margin: 0 auto;。

    $(document).ready(function(){
        $("#hide-show").click(function(){
            $("#panel").slideToggle();
        });
    });

        .main-wrapper{
            margin: 0 auto;
            width: 70%;
        }
        
        #panel{
            width: 100%;
            background-color: aqua;
            display: none;
            position: relative;
            float: left;
        }
        .wrapper{
            width: 100%;
        }
        .images{
            width: 100%;
        }
        #img-1{
            background: url("http://lorempixel.com/output/people-q-c-640-480-1.jpg") no-repeat center;
            background-size:contain;
            height: 300px;
            width: 100%;
        }
        .col {
            width: 32%;
            float: left;
            overflow: hidden;
            background: red;
            border: 2px solid black;
        }

        .col:last-child{
            float: right;
        }

        #testing{
            background: yellow;
            margin: 0 auto;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
    <button id="hide-show" name="Click me">Click me</button>
    <div id="panel">
        <div class="wrapper">
            <div class="col">
                <p>Hello world! 2</p>
                <div id="img-1" class="images"></div>
            </div>
            <div class="col" id="testing">
                <p>Hello world! 3</p>
            </div>
            <div class="col">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit
                    beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque,
                    voluptate fugiat impedit beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam,
                    rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit
                    beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adi</p>
            </div>
        </div>
    </div>

    <p>Hello world! 4</p>
    </div>

这里我把JSFiddle放在一起：JSFiddle

谢谢！

Answer 1

margin: 0 auto;在此处不起作用，因为您在这里float: left;。

将列的宽度增加到33.33％。并添加box-sizing: border-box;

.col {
  width: 33.33%;
  float: left;
  overflow: hidden;
  background: red;
  border: 2px solid black;
  box-sizing: border-box;
}

Answer 2

我更改了你的浮动：左边显示：inline-block;

Counter

    $(document).ready(function() {
      $("#hide-show").click(function() {
        $("#panel").slideToggle();
      });
    });

        .main-wrapper {
          margin: 0 auto;
          width: 70%;
        }
        #panel {
          width: 100%;
          background-color: aqua;
          display: none;
          position: relative;
          float: left;
        }
        .wrapper {
          width: 100%;
          height: 800px;
        }
        .images {
          width: 100%;
        }
        #img-1 {
          background: url("http://lorempixel.com/output/people-q-c-640-480-1.jpg") no-repeat center;
          background-size: contain;
          height: 300px;
          width: 100%;
        }
        .col {
          width: 32%;
          height: 100%;
          display: inline-block;
          overflow: hidden;
          background: red;
          border: 2px solid black;
        }
        .col:last-child {
          float: right;
        }
        #testing {
          background: yellow;
          margin-left: auto;
          margin-right: auto;
        }

Answer 3

浮动元素与其他元素的表现不佳

因为它是一个3列输出，但是，这是一个简单的修复

一般来说：

HTML：

$section->addTextBreak();

CSS

$area=array();
$axis=array();
$topic=array();
$table->addRow(900);
$table->addCell(2000, $styleCell)->addText(htmlspecialchars('test1'), $fontStyle);
$table->addCell(2000, $styleCell)->addText(htmlspecialchars('test2'), $fontStyle);
$table->addCell(2000, $styleCell)->addText(htmlspecialchars('test3'), $fontStyle);
$table->addCell(2000, $styleCell)->addText(htmlspecialchars('test4'), $fontStyle);
for ($i = 0; $i < 4; $i++) {
      $table->addRow();
      $table->addCell(2000)->addText(htmlspecialchars($topic{$i}),array('name' => 'Segoe UI Semilight'));
      $table->addCell(3000)->addText(htmlspecialchars($axis{$i}),array('rtl' => true,'name' => 'Segoe UI Semilight'));
      $table->addCell(2000)->addText(htmlspecialchars($area{$i}),array('rtl' => true,'name' => 'Segoe UI Semilight'));
      $table->addCell(2000)->addText(htmlspecialchars($i),array('rtl' => true,'name' => 'Segoe UI Semilight'));
}

你会注意到额外的“clearFloats”div ...如果你不清除浮动，可能会发生奇怪的布局问题（虽然看起来不是这种情况） -

我发布了https://jsfiddle.net/97nbtgtb/1/，它会像上面一样更改你的标记/ css，没有添加任何清除div，只是改变了css以有效地让中心col没有浮动

Answer 4

显然，你不能在浮动元素上使用margin: auto;。这个特殊情况的答案是为JaromandaX在评论中说明的中间列添加float: none; CSS规则。谢谢你的帮助！

“margin：0 auto”不居中

4 个答案: