Question

有没有办法让我可以在span和paragraph之间有一条水平线。该行应具有与段落相同的宽度。 我该如何训练？ 我不能使用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;
}

这里试图解决position：absolute的问题。问题是每个标题都从不同的高度开始，因为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>

Answer 1

您可以在课程::after上使用.rentout_heading尝试以下解决方案：

＆＃13;

.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-color: red;
  width:100%;
}
.rentout_heading::after {
  content:"";
  display:block;
  border:1px solid red;
}
.rentout_paragraph {
  text-align: justify;
  font: 18px Raleway-Regular, sans-serif;
}

＆＃13;

<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="http://placehold.it/200x200"/>
</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="http://placehold.it/200x200"/>
</div>
</div>

＆＃13;

Answer 2

您可以在::after

中使用伪元素span

注意：</br>无效，您使用<br>，<br/>或<br />

＆＃13;

.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: block;
  position: relative
}
.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;
}

＆＃13;

<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/200">
  </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/200">
  </div>
</div>

＆＃13;

使用flexbox

2 个答案: