垂直对齐破坏断线答案

【问题标题】：Vertical align corrupts break line垂直对齐破坏断线
【发布时间】：2019-05-15 15:30:55
【问题描述】：

我有这个页面，它是一个展示产品的页面，我想要做的是在右侧和左侧有产品的图像，其中包含名称、价格和添加到购物车按钮.我在 img 上使用垂直对齐，因此文本位于顶部，但这样做意味着我必须使用显示内联块，所以我不能使用块来使文本每行一个。我也尝试使用<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>

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：