Wie Sie das layout mithilfe von css?

Ich möchte das layout hier beschrieben

https://github.com/robberfree/frontend-problem/tree/master/img-with-text

Ist es möglich, die Aufgabe zu beenden durch die Verwendung von CSS nur? Ich habe versucht, einige Möglichkeiten. Aber Es ist schwer zu halten, eine Feste Marge zwischen dem img und text.

Für die flex-layout.Der span kann die Breite größer ist als der text, real Breite, wie diese:

.img-text {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-text img {
  width: 32px;
  object-fit: contain;
  margin-right: 8px;
}

.img-text span {
  text-align: center;
}
<p class="img-text">
  <img src="https://github.githubassets.com/images/modules/logos_page/Octocat.png" />
  <span>unexpected happened,Something unexpected happened
            Something unexpected happened,Something unexpected happened,Something unexpected happened
        </span>
</p>

-1
2019-09-19 09:25:03
Quelle
2 Antworten

Die Column (und andere Positionierer für diese Angelegenheit) wird nicht die position von Elementen, die als unsichtbar, die definition ist height und width über null und visible = false an. Dies bedeutet, können Sie ganz einfach lösen, indem die Verankerung der ListView Links und rechts der Eltern:

    ListView {
        height:100
        anchors.left: parent.left
        anchors.right: parent.right

        Component.onCompleted: console.log(implicitHeight, implicitWidth)
        model: theModel
        delegate: Text {
            text: display
        }
    }
+0
2019-09-19 10:09:41
text = re.sub(r'[^\x00-\x7F]',' ', text)

mit dieser habe ich fertig mit diesem Thema

+0
2019-09-19 10:44:52

Sehen Sie sich andere Fragen zu Tags an