我想在不使用 flex 和 grid 的情况下将多列创建为两列布局

发布于 2025-01-12 16:38:24 字数 324 浏览 1 评论 0原文

我需要在不使用 Flex 和网格的情况下将多列创建为两列布局。因为我在 laravel 中使用 dompdf 插件。 dompdf 不支持 grid 和 flex。因为它不支持css v3。请给出css2的布局设计（没有flex和grid）。我不喜欢表格格式，因为两列布局可能有也可能没有相同的高度。这就是为什么它必须调整高度和下一个 div 占用的空白空间的原因。谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

新一帅帅 2025-01-19 16:38:24

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<style type="text/css">
    *{
        outline: none;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    .area{
        width: 100%;
        height: auto;
    }
    .container{
        max-width: 260px;
        padding-top: 1rem;
        margin: 0 auto;
    }
    .box{
        display: inline-block;
        width: 100px;
        height: 100px;
        background: lightgreen;
    }
</style>
<body>
    <div class="area">
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
        </div>
        <div class="container">
            <div class="box">3</div>
            <div class="box">4</div>
        </div>
        <div class="container">
            <div class="box">5</div>
            <div class="box">6</div>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<style type="text/css">
    *{
        outline: none;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    .area{
        width: 100%;
        height: auto;
    }
    .container{
        max-width: 260px;
        padding-top: 1rem;
        margin: 0 auto;
    }
    .box{
        display: inline-block;
        width: 100px;
        height: 100px;
        background: lightgreen;
    }
</style>
<body>
    <div class="area">
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
        </div>
        <div class="container">
            <div class="box">3</div>
            <div class="box">4</div>
        </div>
        <div class="container">
            <div class="box">5</div>
            <div class="box">6</div>
        </div>
    </div>
</body>
</html>

回复收藏 0 原文

一世旳自豪 2025-01-19 16:38:24

使用 laravel 试试这个

<table class="table" style="width:100%">
        @foreach ($isi as $data)
        @if ($loop->iteration % 2 == 1)
            <tr>
        @endif
            <td align="center">
                 <p align="center">image 1</p>
                </td>
                @if ($loop->iteration % 2 == 0)
            </tr>
                @endif
            @endforeach
      </table>

try this using laravel

<table class="table" style="width:100%">
        @foreach ($isi as $data)
        @if ($loop->iteration % 2 == 1)
            <tr>
        @endif
            <td align="center">
                 <p align="center">image 1</p>
                </td>
                @if ($loop->iteration % 2 == 0)
            </tr>
                @endif
            @endforeach
      </table>

回复收藏 0 原文

~没有更多了~