初学 CSS，问一个比较基础的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 1508 天前的主题，其中的信息可能已经有所发展或是发生改变。

不使用 position：absolute，如何把元素放在两个 div 中间？比如说把图中乔氏家的 h3 标签放在上下两个 div 中间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .product {
            width: 560px;
            height: 880px;
            border: 3px solid #eeeeee;
            margin: 20px;
        }

        .product-header {
            width: 560px;
            height: 560px;
            background-color: #f8f8f8;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        
        .product-img {
            width: 455px;
            height: 455px;
        }

        .product-content {
            position: relative;
            margin: 40px;
        }

        .product-brand {
            position: absolute;
            border: 1px solid #cda3b1;
            background-color: #cda3b1;
            color: #ffffff;
            top: -70px;
            padding: 10px;
            font-size: 26px;
            font-weight: 400;
        }

        .product-title {
            font-weight: 400;
            display: -webkit-box;
            word-break: break-word;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            font-size: 40px;
        }

        .product-discount {
            float: left;
            list-style: none;
            border: 1px solid #c82b50;
            margin: 20px 10px 0px 0px;
            font-size: 26px;
            color: #c82b50;
            padding: 2px;
        }

        .product-price {
            clear: both;
            float: left;
            list-style: none;
            line-height: 70px;
            margin: 10px 0px;
        }

        .product-price-text {
            font-size: 40px;
            font-weight: 700;
            color: #f10604;
        }

        .product-similar {
            float: right;
            list-style: none;
            width: 160px;
            height: 70px;
            border: 1px solid #ffe6ea;
            background-color: #ffe6ea;
            border-radius: 999em;
            text-align: center;
            line-height: 70px;
            margin: 10px 0px;
        }

        .product-similar-text {
            font-size: 30px;
            font-weight: 700;
            color: #cd2852;
        }
    </style>
</head>
<body>
    <div class="product">
        <div class="product-header">
            <img class="product-img" src="http://img.alicdn.com/imgextra/i2/3161207834/O1CN01Lwd1Q427k1MvtNOA3_!!3161207834.jpg">
        </div>
        <div class="product-content">
            <h3 class="product-brand">乔氏家</h3>
            <h1 class="product-title">风衣外套女 2020 新款中长款流行英伦风过膝春秋韩版宽松气质大衣</h1>
            <ul>
                <li class="product-discount">
                    <p class="product-discount-info">每 300 减 30</p>
                </li>
                <li class="product-discount">
                    <p class="product-discount-info">满 128 减 10</p>
                </li>
            </ul>
            <ul>
                <li class="product-price">
                    <span class="product-price-text">¥&nbsp;168</span>
                </li>
                <li class="product-similar">
                    <span class="product-similar-text">看相似</span>
                </li>
            </ul>
        </div>
        
    </div>
</body>
</html>

9 条回复 • 2020-10-16 06:58:41 +08:00