Question

我有此页面，这是一个用于显示产品的页面，我想做的是在产品的右侧和左侧具有名称，价格和添加到购物车按钮的图像。我在img上使用了垂直对齐方式，因此文本位于顶部，但这意味着我必须使用display inline-block，所以我不能使用block使文本每行一行。我也尝试使用<br>，但它使文本进入图像的下方。

* {
            margin: 0;
            font-family: Iransans;
            box-sizing: border-box;
        }

        * a:link {
            text-decoration: none;
        }

        body {
            background-color: #f5f5f5;
            height: 100%;
            min-height: 100%;
        }
        article{
            background-color: #ffffff;
            width: 85%;
            padding: 20px 20px;
            text-align: right;
            direction: rtl;
            border-radius: 3px;
            margin: 20px auto;
            -webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
        }
        img{
            border: 1px solid #d9d9d9;
            display: inline-block;
            vertical-align: top;
        }
        .name{
            display: inline-block;
            font-size: 20px;
            font-weight: bold;
            margin: 5px 50px;
            padding: 0 10px;
            border-right: 5px solid #13bf19;
        }
        .price{
            display: inline-block;
        }

<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product</div><br>
<div class="price">$59.99</div>
</article>
</body>

这就是我要制作的：

.image{
margin: 0 50px;
float: right;
border: 1px solid black;
width: 100px;
height: 100px;
}
.text{
float: right;

}

<body>
<span class="image">IMAGE</span>
<span class="text">text</span><br>
<span class="text">text</span>
</body>

Answer 1

而不是在div之外添加
，而是在其内部添加。

* {
            margin: 0;
            font-family: Iransans;
            box-sizing: border-box;
        }

        * a:link {
            text-decoration: none;
        }

        body {
            background-color: #f5f5f5;
            height: 100%;
            min-height: 100%;
        }
        article{
            background-color: #ffffff;
            width: 85%;
            padding: 20px 20px;
            text-align: right;
            direction: rtl;
            border-radius: 3px;
            margin: 20px auto;
            -webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
        }
        img{
            border: 1px solid #d9d9d9;
            display: inline-block;
            vertical-align: top;
        }
        .name{
            display: inline-block;
            font-size: 20px;
            font-weight: bold;
            margin: 5px 50px;
            padding: 0 10px;
            border-right: 5px solid #13bf19;
        }
        .price{
            display: inline-block;
        }

<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product<br><div class="price">$59.99</div></div><br>

</article>

Answer 2

只需为其样式

* {
            margin: 0;
            font-family: Iransans;
            box-sizing: border-box;
        }

        * a:link {
            text-decoration: none;
        }

        body {
            background-color: #f5f5f5;
            height: 100%;
            min-height: 100%;
        }
        article{
            background-color: #ffffff;
            width: 85%;
            padding: 20px 20px;
            text-align: right;
            direction: rtl;
            border-radius: 3px;
            margin: 20px auto;
            -webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
        }
        img{
            border: 1px solid #d9d9d9;
            display: inline-block;
            vertical-align: top;
        }

        .name{
            display: inline-block;
            font-size: 20px;
            font-weight: bold;
            margin: 5px 50px;
            padding: 0 10px;
            border-right: 5px solid #13bf19;
        }
        .price{
            font-size: 15px;
            font-weight: normal;
        }

<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name"><h2>name of product</h2><h3 class="price">$59.99</h3></div>
</article>
</body>

垂直对齐会破坏折线

2 个答案: