Question

所以目前我正在开发一个投资组合，我不能使用Bootstrap，因为它与网站不兼容（它搞砸了所有内容，我可以做一些调整，但这不是重点）所以我试图在同一行上创建3个div 不使用使用float: left;如何在没有引导程序或表格的情况下执行此操作？

        <div id="Portfolio">
            <div class="portfolioWrapper">

                <a class="portfolioLink" href="#">
                <div class="portfolioProject">
                    <h4>Sample Project</h4>
                </div>
                </a>

                <a class="portfolioLink" href="#">
                <div class="portfolioProject">
                    <h4>Sample Project</h4>
                </div>
                </a>

                <a class="portfolioLink" href="#">
                <div class="portfolioProject">
                    <h4>Sample Project</h4>
                </div>
                </a>

            </div>
        </div>

Answer 1

将display属性设置为flex将允许项目坐在一行中，只要它们不太宽。

.portfolioWrapper {
  display:flex;
  justify-content: space-around; 
}

        <div id="Portfolio">
            <div class="portfolioWrapper">

                <a class="portfolioLink" href="#">
                <div class="portfolioProject">
                    <h4>Sample Project</h4>
                </div>
                </a>

                <a class="portfolioLink" href="#">
                <div class="portfolioProject">
                    <h4>Sample Project</h4>
                </div>
                </a>

                <a class="portfolioLink" href="#">
                <div class="portfolioProject">
                    <h4>Sample Project</h4>
                </div>
                </a>

            </div>
        </div>

Answer 2

~~嗯，首先你需要在div容器内移动锚点：~~

<击> <div class="portfolioProject">

<击> <a class="portfolioLink" href="#"><h4>Sample Project</h4></a>

<击> </div>

您可以使用CSS选择器在子锚点上设置display: inline-block以使它们彼此相邻显示，如下所示：

div > a { display: inline-block;}

编辑：@GCyrillus指出，如果文档类型为HTML5，则不需要将锚点放回div中。您可以使用以下CSS修复此问题：

 div > a {
    display: inline-block;
 }

Updated JSFiddle example

Answer 3

您可以尝试将.portfolioWrapper设置为相对位置，然后将所有.portfolioLink设置为显示：inline-block并根据外部容器的长度设置33％的宽度。如果使用内联块，则不应该使用浮点数。

＆＃13;

.portfolioWrapper {
    position: relative;
  }

.portfolioLink { 
   display:inline-block;
   width: 33%;  
  }

＆＃13;

向左飘浮;在一行中制作div的替代方法？

3 个答案: