Ich benötige zwei Bereiche (im Beispiel Kontrollkästchen und Überschrifteninhalte), um immer horizontal zueinander zu bleiben, egal wie eng das Browserfenster wird. Ich brauche auch die Checkboxyes-Spanne, um vertikal zu schweben, damit sie immer mit der aktuellen Höhe der Spanne des Überschrifteninhalts zentriert ist.

Ich habe versucht, beide als Divs zu schweben, was im Allgemeinen für die Anforderung "In Linie bleiben" funktioniert, aber ich kann nicht scheinen, dass die Checkboxyes-Spanne vertikal schwebt und auf der Spanne der Überschrifteninhalte zentriert bleibt.

Hier sind die anfänglichen, sehr grundlegenden Anforderungen. Ich habe alle Arten von Float-, Display-: Inline-Block- usw. Kombinationen ausprobiert, ohne Glück.

#container {
  width: 100%;
}

#checkboxyes {
  margin-right: 15px;
}

#checkbox {
  margin-right: 5px;
}

#yes {}

#headlinecontents {}

#headline {
  font-weight: bold;
}

#contents {}
<div id="container">
  <span id="checkboxyes">
          <span id="checkbox">checkbox</span>
  <span id="yes">YES</span>
  </span>
  <span id="headlinecontents">
          <div id="headline">Title of the article Title of the article </div>
          <div id="contents">Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article </div>
       </span>
</div>

Wide

Mid

Narrow

0
Emile Bourquin 19 Jän. 2019 im 00:23

3 Antworten

Beste Antwort
#container {
  display: flex;
  align-items: center;
}
#checkboxyes {
  flex: 0;
  display: flex;
}
#headlinecontents {
  flex: 1;
}

Sehen Sie, wie es funktioniert:

#container {
  width: 100%;
}

#checkboxyes {
  margin-right: 15px;
}

#checkbox {
  margin-right: 5px;
}

#headlinecontents {}

#headline {
  font-weight: bold;
}

#container {
  display: flex;
  align-items: center;
}

#checkboxyes {
  flex: 0;
  display: flex;
}

#headlinecontents {
  flex: 1;
}
<div id="container">
  <span id="checkboxyes">
      <span id="checkbox">checkbox</span>
  <span id="yes">YES</span>
  </span>
  <span id="headlinecontents">
      <div id="headline">Title of the article Title of the article </div>
      <div id="contents">Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article </div>
   </span>
</div>

Nützliche Ressourcen:

2
tao 18 Jän. 2019 im 21:43

Ich empfehle die Verwendung von Flexbox.

#container {
     display: flex;
}
1
MaZoli 18 Jän. 2019 im 21:29

Sie können Flex-Box verwenden. Es ist sehr einfach zu implementieren und kann alle Ihre Anforderungen erfüllen. Es reagiert auch, was eine wichtige Voraussetzung für Sie ist, wie Sie in Ihrer Frage erwähnt haben.

https://jsfiddle.net/snehansh/6huvtxz2/7/

Weisen Sie display: flex <div id="container"> zu. Hiermit können Sie Ausrichtungen für die untergeordneten Elemente checkboxyes und headlinecontents angeben. Beachten Sie, dass Flex-Box den Inhalt standardmäßig horizontal ausrichtet, sodass Sie keine Ausrichtung für untergeordnete Elemente angeben müssen.

  #container {
     width: 100%;
     display: flex;
  }

Sie möchten, dass der Inhalt Ihrer Spanne checkboxyes vertikal zentriert ausgerichtet wird.

Auch hierzu weisen Sie dem Element checkboxyes display: flex zu und richten seine untergeordneten Elemente mit align-items: center; vertikal aus.

  #checkboxyes {
     margin-right: 15px;
     display: flex;
     align-items: center;
  }

Um mehr über Flex-Box zu lesen. Sie können auf Folgendes verweisen: https://css-tricks.com/snippets / css / a-guide-to-flexbox /

0
user1579234 18 Jän. 2019 im 21:42