0
スパンと段落の間に水平線を付ける方法はありますか？行の段落と同じ幅にする必要があります。 これをどのようにして実現できますか？ divはフレックスアイテムとして認識され、段落の隣に置かれるため、divを使用することはできません。フレックスボックスでスパンと段落の間に水平線を作成する
詳細情報が必要な場合は、私に知らせて。絶対：
rentout.html.erb
<div class="vorteil_wrapper">
<div class="rentout_content_left">
<p class="rentout_paragraph">
<span class="rentout_heading">Erstellung eines professionellen Inserats</span></br>
Wir besuchen Ihre Unterkunft und erstellen professionelle Fotos und Videos,
welche nach der Bearbeitung für Ihr Inserat auf unserer Internetseite
genutzt werden. Darüber hinaus verfassen wir eine hochwertige Beschreibung
und Präsentation Ihrer Unterkunft, welche die Highlights sowie die
Atmosphäre Ihrer Unterkunft in Vordergrund setzt.
</p>
</div>
<div class="rentout_picture_right">
<%= image_tag("inserat.png", alt: "inserat", :class => "inserat") %>
</div>
</div>
<div class="vorteil_wrapper_reverse">
<div class="rentout_content_right">
<p class="rentout_paragraph">
<span class="rentout_heading">Responsive Webdesign</span></br>
Wussten Sie das 65% aller Internet Nutzer ein Handy zum Surfen benutzen!
Ihr zukünftiges Inserat wird auf unserer Seite optimal auf allen Geräten
angezeigt, um somit die Benutzerfreundlichkeit und die Umsatzrate zu
steigern.
</p>
</div>
<div class="rentout_picture_left">
<%= image_tag("responsive_webdesign.png", alt: "responsive webdesign", :class => "responsive_webdesign") %>
</div>
</div>
application.scssここ
.vorteil_wrapper {
height: 200px;
margin-bottom: 0px;
display: flex;
justify-content: space-around;
}
.vorteil_wrapper_reverse {
margin-bottom: 30px;
display: flex;
justify-content: space-around;
flex-direction: row-reverse;
}
.rentout_content_left {
height: 200px;
width: 100%;
padding-right: 30px;
display: flex;
align-items: center;
}
.rentout_content_right {
height: 200px;
width: 100%;
padding-left: 30px;
display: flex;
align-items: center;
}
.rentout_heading {
font: 28px Raleway-Medium, sans-serif;
margin-bottom: 6px;
display: inline-block;
text-decoration: underline;
text-decoration-color: red;
}
.rentout_paragraph {
text-align: justify;
font: 18px Raleway-Regular, sans-serif;
}
これは、位置の問題を解決しようとしています。問題は、div（rentout_content_left/rentout_content_right）内の要素（段落/スパン）が中央に配置され、各段落とスパンの文字数が異なるため、すべての見出しが異なる高さで開始されることです。
.rentout_wrapper {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.vorteil_wrapper {
height: 200px;
margin-bottom: 0px;
display: flex;
justify-content: space-around;
position: relative;
}
.vorteil_wrapper_reverse {
margin-bottom: 30px;
display: flex;
justify-content: space-around;
flex-direction: row-reverse;
}
.rentout_content_left {
height: 200px;
width: 100%;
padding-right: 30px;
display: flex;
align-items: center;
}
.rentout_content_right {
height: 200px;
width: 100%;
padding-left: 30px;
display: flex;
align-items: center;
}
.rentout_heading {
font: 28px Raleway-Medium, sans-serif;
margin-bottom: 6px;
display: inline-block;
}
.rentout_heading::after {
content: "";
position: absolute;
border-bottom: 1px solid red;
left: 0;
bottom: -5px;
width: 100%
}
.rentout_paragraph {
text-align: justify;
font: 18px Raleway-Regular, sans-serif;
}<div class="rentout_wrapper">
<div class="vorteil_wrapper">
<div class="rentout_content_left">
<p class="rentout_paragraph">
<span class="rentout_heading">Erstellung eines professionellen Inserats</span>
</br>
Wir besuchen Ihre Unterkunft und erstellen professionelle Fotos und Videos, welche nach der Bearbeitung für Ihr Inserat auf unserer Internetseite genutzt werden. Darüber hinaus verfassen wir eine hochwertige Beschreibung und Präsentation Ihrer Unterkunft,
welche die Highlights sowie die Atmosphäre Ihrer Unterkunft in Vordergrund setzt.
</p>
</div>
<div class="rentout_picture_right">
<img src="//lorempixel.com/200/192">
</div>
</div>
<div class="vorteil_wrapper_reverse">
<div class="rentout_content_right">
<p class="rentout_paragraph">
<span class="rentout_heading">Responsive Webdesign</span>
</br>
Wussten Sie das 65% aller Internet Nutzer ein Handy zum Surfen benutzen! Ihr zukünftiges Inserat wird auf unserer Seite optimal auf allen Geräten angezeigt, um somit die Benutzerfreundlichkeit und die Umsatzrate zu steigern.
</p>
</div>
<div class="rentout_picture_left">
<img src="//lorempixel.com/200/192">
</div>
</div>
</div>
<br />を使用します見出しと段落は段落とスパンではありません。あなたはあなたの構造を再フォーマットすることを考えるかもしれません。 –