मैं इस तरह की छवि के तहत मोबाइल पर एक नई लाइन में लपेटने के लिए एक फ्लेक्स तत्व चाहता हूं (नीचे छवि देखें)। लेकिन मैं इसे काम पर नहीं ला सकता। एकमात्र समाधान जिसके साथ मैं आ सकता हूं वह है सामग्री को HTML में दो अलग-अलग स्थानों पर रखना, और प्रदर्शित करना: उत्तरदायी सीएसएस वाले संस्करणों में से कोई भी नहीं। लेकिन कोई बेहतर उपाय होना चाहिए। किसी भी सहायताको बहुत सराहा जाएगा। यहां छवि विवरण दर्ज करें

मेरी प्रारंभिक सोच कुछ इस तरह थी:

div {
  display: flex;
}

section {
  display: flex;
  flex-direction: column;
}

ul {
  display: flex;
}


/* Ignore stuff under, it's just for aesthetics */

body {
  font-family: arial;
}

img {
margin-right: 20px;
}

ul {
  padding: 0;
  margin-left: 20px;
}

li {
  margin-right: 20px;
}

h1 {
margin: 0;
padding-top: 20px;
}
<div>
  <img src="https://via.placeholder.com/100x100" />
  <section>
    <h1>This is a headline</h1>
    <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
    </ul>
   </section>
  </div>
0
Andreas 5 अक्टूबर 2018, 01:11

1 उत्तर

सबसे बढ़िया उत्तर

छवि के तहत सूची बनाने में सक्षम होने के लिए आप मोबाइल पर फ्लोट पर विचार कर सकते हैं:

div.container {
  display: flex;
}

section {
  display: flex;
  flex-direction: column;
}

ul {
  display: flex;
}
@media (max-width:800px) { /*adjust this like you want*/
div.container {
 display:block;
}
div.container img {
  float:left;
}
section {
 display:block;
 padding-top:25px;
}
section ul {
 margin-top:50px;
}
  
}


/* Ignore stuff under, it's just for aesthetics */

body {
  font-family: arial;
}

img {
margin-right: 20px;
}

ul {
  padding: 0;
  margin-left: 20px;
}

li {
  margin-right: 20px;
}

h1 {
margin: 0;
padding-top: 20px;
}
<div class="container">
  <img src="https://via.placeholder.com/100x100" />
  <section>
    <h1>This is a headline</h1>
    <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
    </ul>
   </section>
  </div>
1
Temani Afif 4 अक्टूबर 2018, 22:23