So stellen Sie die Höhe basierend auf dem Inhalt ein css

Ich versuche, das Untermenü basierend auf dem Inhalt anzupassen. Momentan ist es behoben und kann 4 Untermenüs enthalten. Sehen Sie "Verkauf", es hält 4, aber auf "Armaturenbrett" hält es drei und es gibt einen leeren Raum. Ich möchte nicht, dass dieser leere Raum da ist.So stellen Sie die Höhe basierend auf dem Inhalt ein css

Es gibt eine Höhe auf meinem Label Klasse zugeordnet

input[type='radio']:checked + label { 
    height: 325px;

versuchte ich es auf 100% und auch versucht, Überlauf Auto aber die Höhe des Untermenüs nicht anpassen.

Haben Sie Ideen, wie Sie die Höhe dynamisch einstellen?

CodePen: https://codepen.io/anon/pen/gwjvvw

Quelle

2016-10-14 Will W-Train Gao

warf einen Blick auf den codepen aber ganz offen gesagt keine Ahnung, wo sie suchen müssen zu identifizieren dein Problem. Ich bin ein wenig verwirrt darüber, was Sie meinen - standardmäßig sollte ein Element so erweitert werden, dass es zu seinem Inhalt passt, sofern nicht anders angegeben. – Santi

'Höhe: Auto'? –

@GeoffJames nein es wird nicht gerendert, wenn es automatisch ist .. –

Sie müssen height: auto; festlegen die Höhe zu erlauben, zu sein, was der Inhalt ist. Dies führt zu Problemen, da die Höhe Ihres Inhalts im Wesentlichen 0 ist, weil Sie so viel Floating und absolute Position ausgeführt haben. Dann müssen Sie das beheben.

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300); 
 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
} 
 

 
input[type='radio'] { 
 
    display: none; 
 
} 
 

 
label { 
 
    cursor: pointer; 
 
} 
 

 
::-webkit-scrollbar { 
 
    display: none; 
 
} 
 

 
body .swanky { 
 
    margin: auto; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
body { 
 
    height: 100vh; 
 
    font-weight: 500; 
 
    font-family: "Roboto", sans-serif; 
 

 
    -webkit-font-smoothing: antialiased; 
 
    font-size: 12px; 
 
} 
 

 

 
body .swanky_title__social a { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 140px; 
 
    margin-right: 15px; 
 
    text-decoration: none; 
 
    padding: 0px 0px 5px 0px; 
 
    height: 40px; 
 
    border: 2px solid white; 
 
    float: left; 
 
    color: white; 
 
    font-size: 12px; 
 
    font-weight: 400; 
 
    margin-top: 20px; 
 
} 
 
body .swanky_title__social a .slide { 
 
    height: 45px; 
 
    width: 100px; 
 
    float: left; 
 
    position: absolute; 
 
    transform: skew(20deg); 
 
    left: -120px; 
 
    transition-property: left; 
 
    transition-duration: .2s; 
 
    background: white; 
 
} 
 
body .swanky_title__social a .slide .arrow { 
 
    position: absolute; 
 
    right: 31px; 
 
    top: 24px; 
 
    opacity: 0; 
 
    transform: skew(-20deg); 
 
} 
 
body .swanky_title__social a .slide .arrow .stem { 
 
    width: 10px; 
 
    height: 2px; 
 
    background: #858490; 
 
} 
 
body .swanky_title__social a .slide .arrow .point { 
 
    width: 6px; 
 
    height: 6px; 
 
    border-right: 2px solid #858490; 
 
    top: -3px; 
 
    right: 1px; 
 
    position: absolute; 
 
    transform: rotate(45deg); 
 
    border-top: 2px solid #858490; 
 
} 
 
body .swanky_title__social a img { 
 
    width: 16px; 
 
    margin-left: 10px; 
 
    position: relative; 
 
    margin-right: 8px; 
 
    transition-property: margin-left; 
 
    transition-duration: .1s; 
 
    margin-top: 10px; 
 
    top: 4px; 
 
} 
 
body .swanky_title__social a:hover > .slide { 
 
    left: -70px; 
 
    transition-property: left; 
 
    transition-duration: .1s; 
 
} 
 
body .swanky_title__social a:hover > img { 
 
    margin-left: 40px; 
 
    transition-property: margin-left; 
 
    transition-duration: .1s; 
 
} 
 
body .swanky_title__social a:hover > .slide .arrow { 
 
    right: 11px; 
 
    opacity: 1; 
 
    transition-property: right,opacity; 
 
    transition-delay: .07s; 
 
    transition-duration: .2s; 
 
} 
 
body .swanky .intro { 
 
    float: right; 
 
    color: white; 
 
    width: 370px; 
 
    top: 50px; 
 
    position: relative; 
 
} 
 
body .swanky .intro h1 { 
 
    text-shadow: 0px 2px rgba(0, 0, 0, 0.26); 
 
} 
 
body .swanky .intro p { 
 
    line-height: 20px; 
 
    text-shadow: 0px 1px rgba(0, 0, 0, 0.26); 
 
} 
 
body .swanky_wrapper { 
 
    width: 225px; 
 
    height: auto; 
 
    overflow: hidden; 
 
    border-radius: 4px; 
 
    background: #2c2e2f; 
 
} 
 
body .swanky_wrapper label { 
 
    /* padding: 25px; */ 
 
    float: left; 
 
    height: 72px; 
 
    border-bottom: 1px solid #313437; 
 
    position: relative; 
 
    width: 100%; 
 
    color: #eff4fa; 
 
    transition: text-indent .15s, height .3s; 
 
    box-sizing: border-box; 
 
} 
 
body .swanky_wrapper label img { 
 
    margin-right: 10px; 
 
    position: relative; 
 
    top: 2px; 
 
    width: 16px; 
 
    margin-left: 25px; 
 
    margin-top: 25px; 
 
} 
 
body .swanky_wrapper label span { 
 
    position: relative; 
 
    top: -3px; 
 
} 
 
body .swanky_wrapper label:hover { 
 
    background: #212e41; 
 
    border-bottom: 1px solid #313437; 
 
    text-indent: 4px; 
 
} 
 
body .swanky_wrapper label:hover .bar { 
 
    width: 100%; 
 
} 
 
body .swanky_wrapper label .bar { 
 
    width: 0px; 
 
    transition: width .15s; 
 
    height: 2px; 
 
    position: absolute; 
 
    display: block; 
 
    background: #355789; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
body .swanky_wrapper label .lil_arrow { 
 
    width: 5px; 
 
    height: 5px; 
 
    -webkit-transition: transform 0.8s; 
 
    transition: transform 0.8s; 
 
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
    border-top: 2px solid white; 
 
    border-right: 2px solid white; 
 
    float: right; 
 
    position: relative; 
 
    top: 6px; 
 
    right: 2px; 
 
    transform: rotate(45deg); 
 
    margin-right:25px; 
 
    margin-top:25px; 
 
} 
 
body .swanky_wrapper__content { 
 
    /*position: absolute;*/ 
 
    display: none; 
 
    overflow: hidden; 
 
    left: 0; 
 
    width: 100%; 
 
    margin-top: 25px; 
 
} 
 
body .swanky_wrapper__content li { 
 
    width: 100%; 
 
    opacity: 0; 
 
    left: -100%; 
 
    background: #313437; 
 
    padding: 25px 0px; 
 
    text-indent: 25px; 
 
    box-shadow: 0px 0px #126CA1 inset; 
 
    transition: box-shadow .3s,text-indent .3s; 
 
    position: relative; 
 
} 
 
body .swanky_wrapper__content li:hover { 
 
    background: #313437; 
 
    box-shadow: 3px 0px #126CA1 inset; 
 
    transition: box-shadow .3s linear,text-indent .3s linear; 
 
    text-indent: 31px; 
 
} 
 
body .swanky_wrapper__content .clear { 
 
    clear: both; 
 
} 
 

 
input[type='radio']:checked + label .swanky_wrapper__content { 
 
    display: block; 
 
    top: 68px; 
 
    border-bottom: 1px solid #313437; 
 
} 
 

 
input[type="radio"]:checked + label > .lil_arrow { 
 
    -webkit-transition: -webkit-transform 0.8s; 
 
    transition: transform 0.8s; 
 
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
    -webkit-transform: rotate(135deg); 
 
    -ms-transform: rotate(135deg); 
 
    transform: rotate(135deg); 
 
    border-top: 2px solid #14a3f9; 
 
    border-right: 2px solid #14a3f9; 
 
} 
 

 
input[type='radio']:checked + label { 
 
    height: auto; 
 
    background: #212e41; 
 
    text-indent: 4px; 
 
    transition-property: height; 
 
    transition-duration: .6s; 
 
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
} 
 

 
input[type='radio']:checked + label .bar { 
 
    width: 0; 
 
} 
 

 
input[type='radio']:checked + label li:nth-of-type(1) { 
 
    animation: in 0.15s 0.575s forwards; 
 
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
    -moz-animation: in 0.15s 0.575s forwards; 
 
    -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
} 
 
input[type='radio']:checked + label li:nth-of-type(2) { 
 
    animation: in 0.15s 0.7s forwards; 
 
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
    -moz-animation: in 0.15s 0.7s forwards; 
 
    -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
} 
 
input[type='radio']:checked + label li:nth-of-type(3) { 
 
    animation: in 0.15s 0.825s forwards; 
 
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
    -moz-animation: in 0.15s 0.825s forwards; 
 
    -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
} 
 
input[type='radio']:checked + label li:nth-of-type(4) { 
 
    animation: in 0.15s 0.95s forwards; 
 
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
    -moz-animation: in 0.15s 0.95s forwards; 
 
    -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
} 
 

 
@keyframes in { 
 
    from { 
 
    left: -100%; 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    left: 0; 
 
    opacity: 1; 
 
    } 
 
} 
 
.love { 
 
    position: absolute; 
 
    right: 20px; 
 
    bottom: 0px; 
 
    font-size: 11px; 
 
    font-weight: normal; 
 
} 
 
.love p { 
 
    color: white; 
 
    font-weight: normal; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 
.love a { 
 
    color: white; 
 
    font-weight: 700; 
 
    text-decoration: none; 
 
} 
 
.love img { 
 
    position: relative; 
 
    top: 3px; 
 
    margin: 0px 4px; 
 
    width: 10px; 
 
} 
 

 
.brand { 
 
    position: absolute; 
 
    left: 20px; 
 
    bottom: 14px; 
 
} 
 
.brand img { 
 
    width: 30px; 
 
}

<div class="swanky_wrapper"> 
 
    <input id="Dashboard" name="radio" type="radio"></input> 
 
    <label for="Dashboard"> 
 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/dash.png"/> 
 
     <span>Dashboard</span> 
 
     <div class="lil_arrow"></div> 
 
     <div class="bar"></div> 
 
     <div class="swanky_wrapper__content"> 
 
     <ul> 
 
      <li>Tools</li> 
 
      <li>Reports</li> 
 
      <li>Analytics</li> 
 
      
 
     </ul> 
 
     </div> 
 
    </label> 
 
    <input id="Sales" name="radio" type="radio"></input> 
 
    <label for="Sales"> 
 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/del.png"/> 
 
     <span>Sales</span> 
 
     <div class="lil_arrow"></div> 
 
     <div class="bar"></div> 
 
     <div class="swanky_wrapper__content"> 
 
     <ul> 
 
      <li>New Sales</li> 
 
      <li>Expired Sales</li> 
 
      <li>Sales Reports</li> 
 
      <li>Deliveries</li> 
 
     </ul> 
 
     </div> 
 
    </label> 
 
    <input id="Messages" name="radio" type="radio"></input> 
 
    <label for="Messages"> 
 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/mess.png"/> 
 
     <span>Messages</span> 
 
     <div class="lil_arrow"></div> 
 
     <div class="bar"></div> 
 
     <div class="swanky_wrapper__content"> 
 
     <ul> 
 
      <li>Inbox</li> 
 
      <li>Outbox</li> 
 
      <li>Sent</li> 
 
      <li>Archived</li> 
 
     </ul> 
 
     </div> 
 
    </label> 
 
    <input id="Users" name="radio" type="radio"></input> 
 
    <label for="Users"> 
 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/users.png"/> 
 
     <span>Users</span> 
 
     <div class="lil_arrow"></div> 
 
     <div class="bar"></div> 
 
     <div class="swanky_wrapper__content"> 
 
     <ul> 
 
      <li>New User</li> 
 
      <li>User Groups</li> 
 
      <li>Permissions</li> 
 
      <li>Passwords</li> 
 
     </ul> 
 
     </div> 
 
    </label> 
 
    <input id="Settings" radio="radio" type="radio"></input> 
 
    <label for="Settings"> 
 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/set.png"/> 
 
     <span>Settings</span> 
 
     <div class="lil_arrow"></div> 
 
     <div class="swanky_wrapper__content"> 
 
     <ul> 
 
      <li>Databases</li> 
 
      <li>Design</li> 
 
      <li>Change User</li> 
 
      <li>Log Out</li> 
 
     </ul> 
 
     </div> 
 
    </label> 
 
    </div> 
 

 
<!--/ My Footer 
 
-->

Hier wird mit sauberen HTML getan:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300); 
 
ul, 
 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
ul.swanky_wrapper { 
 
    width: 225px; 
 
    height: auto; 
 
    overflow: hidden; 
 
    border-radius: 4px; 
 
    background: #2c2e2f; 
 
} 
 
ul.swanky_wrapper > li { 
 
    position: relative; 
 
} 
 
ul.swanky_wrapper > li:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    height: 2px; 
 
    left: -100%; 
 
    transition: .15s all; 
 
    bottom: 0; 
 
    width: 225px; 
 
    z-index: 10; 
 
    background-color: #355789; 
 
} 
 
ul.swanky_wrapper > li:hover:after { 
 
    left: 0; 
 
} 
 

 
ul.swanky_wrapper input[type='radio'] { 
 
    display: none; 
 
} 
 
ul.swanky_wrapper input[type='radio'] + label { 
 
    padding: 25px; 
 
    height: 72px; 
 
    border-bottom: 1px solid #313437; 
 
    position: relative; 
 
    color: #eff4fa; 
 
    -webkit-transition: text-indent 0.15s, height 0.3s; 
 
    transition: text-indent 0.15s, height 0.3s; 
 
    box-sizing: border-box; 
 
    display: block; 
 
} 
 
ul.swanky_wrapper input[type='radio'] + label:hover { 
 
    background: #212e41; 
 
    border-bottom: 1px solid #313437; 
 
    text-indent: 4px; 
 
} 
 
ul.swanky_wrapper input[type='radio'] + label:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 16px; 
 
    background-size: cover; 
 
    margin-right: 10px; 
 
    position: relative; 
 
    top: 3px; 
 
} 
 
ul.swanky_wrapper input[type='radio'] + label:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 5px; 
 
    height: 5px; 
 
    -webkit-transition: transform 0.8s; 
 
    -webkit-transition: -webkit-transform 0.8s; 
 
    transition: -webkit-transform 0.8s; 
 
    transition: transform 0.8s; 
 
    transition: transform 0.8s, -webkit-transform 0.8s; 
 
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
    border-top: 2px solid white; 
 
    border-right: 2px solid white; 
 
    position: absolute; 
 
    top: 6px; 
 
    right: 2px; 
 
    -webkit-transform: rotate(45deg); 
 
      transform: rotate(45deg); 
 
    margin-right: 25px; 
 
    margin-top: 25px; 
 
} 
 
ul.swanky_wrapper input[type='radio'] + label + ul { 
 
    display: none; 
 
} 
 
ul.swanky_wrapper input[type='radio']:checked + label { 
 
    height: auto; 
 
    background: #212e41; 
 
    text-indent: 4px; 
 
    -webkit-transition-property: height; 
 
    transition-property: height; 
 
    -webkit-transition-duration: .6s; 
 
      transition-duration: .6s; 
 
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
} 
 
ul.swanky_wrapper input[type='radio']:checked + label:after { 
 
    -webkit-transform: rotate(135deg); 
 
      transform: rotate(135deg); 
 
} 
 
ul.swanky_wrapper input[type='radio']:checked ~ ul { 
 
    display: block; 
 
    top: 68px; 
 
    border-bottom: 1px solid #313437; 
 
} 
 
ul.swanky_wrapper input[type='radio']:checked ~ ul li { 
 
    position: relative; 
 
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
      transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
    color: #fff; 
 
} 
 
ul.swanky_wrapper input[type='radio']:checked ~ ul li:nth-of-type(1) { 
 
    -webkit-animation: in 0.15s 0.575s forwards; 
 
      animation: in 0.15s 0.575s forwards; 
 
} 
 
ul.swanky_wrapper input[type='radio']:checked ~ ul li:nth-of-type(2) { 
 
    -webkit-animation: in 0.15s 0.7s forwards; 
 
      animation: in 0.15s 0.7s forwards; 
 
} 
 
ul.swanky_wrapper input[type='radio']:checked ~ ul li:nth-of-type(3) { 
 
    -webkit-animation: in 0.15s 0.825s forwards; 
 
      animation: in 0.15s 0.825s forwards; 
 
} 
 
ul.swanky_wrapper input[type='radio']:checked ~ ul li:nth-of-type(4) { 
 
    -webkit-animation: in 0.15s 0.95s forwards; 
 
      animation: in 0.15s 0.95s forwards; 
 
} 
 
ul.swanky_wrapper ul li { 
 
    width: 100%; 
 
    opacity: 0; 
 
    left: -100%; 
 
    background: #313437; 
 
    padding: 25px 0px; 
 
    text-indent: 25px; 
 
    box-shadow: 0px 0px #126CA1 inset; 
 
    -webkit-transition: box-shadow 0.3s, text-indent 0.3s; 
 
    transition: box-shadow 0.3s, text-indent 0.3s; 
 
    position: relative; 
 
} 
 
ul.swanky_wrapper ul li:hover { 
 
    background: #313437; 
 
    box-shadow: 3px 0px #126CA1 inset; 
 
    -webkit-transition: box-shadow 0.3s linear, text-indent 0.3s linear; 
 
    transition: box-shadow 0.3s linear, text-indent 0.3s linear; 
 
    text-indent: 31px; 
 
} 
 
ul.swanky_wrapper li:nth-of-type(1) label:before { 
 
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/dash.png'); 
 
} 
 
ul.swanky_wrapper li:nth-of-type(2) label:before { 
 
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/del.png'); 
 
} 
 
ul.swanky_wrapper li:nth-of-type(3) label:before { 
 
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/mess.png'); 
 
} 
 
ul.swanky_wrapper li:nth-of-type(4) label:before { 
 
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/users.png'); 
 
} 
 
ul.swanky_wrapper li:nth-of-type(5) label:before { 
 
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/set.png'); 
 
} 
 
body { 
 
    height: 100vh; 
 
    font-weight: 500; 
 
    font-family: "Roboto", sans-serif; 
 
    -webkit-font-smoothing: antialiased; 
 
    font-size: 12px; 
 
} 
 
@-webkit-keyframes in { 
 
    from { 
 
    left: -100%; 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    left: 0; 
 
    opacity: 1; 
 
    } 
 
} 
 
@keyframes in { 
 
    from { 
 
    left: -100%; 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    left: 0; 
 
    opacity: 1; 
 
    } 
 
}

<ul class="swanky_wrapper"> 
 
    <li> 
 
    <input id="Dashboard" name="radio" type="radio" /> 
 
    <label for="Dashboard">Dashboard</label> 
 
    <ul> 
 
     <li>Tools</li> 
 
     <li>Reports</li> 
 
     <li>Analytics</li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <input id="Sales" name="radio" type="radio"></input> 
 
    <label for="Sales">Sales</label> 
 
    <ul> 
 
     <li>New Sales</li> 
 
     <li>Expired Sales</li> 
 
     <li>Sales Reports</li> 
 
     <li>Deliveries</li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <input id="Messages" name="radio" type="radio"></input> 
 
    <label for="Messages">Messages</label> 
 
    <ul> 
 
     <li>Inbox</li> 
 
     <li>Outbox</li> 
 
     <li>Sent</li> 
 
     <li>Archived</li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <input id="Users" name="radio" type="radio"></input> 
 
    <label for="Users">Users</label> 
 
    <ul> 
 
     <li>New User</li> 
 
     <li>User Groups</li> 
 
     <li>Permissions</li> 
 
     <li>Passwords</li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <input id="Settings" name="radio" type="radio"></input> 
 
    <label for="Settings">Settings</label> 
 
    <ul> 
 
     <li>Databases</li> 
 
     <li>Design</li> 
 
     <li>Change User</li> 
 
     <li>Log Out</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Quelle

2016-10-14 18:13:13

Nur als eine Notiz, ich würde die IMG-Tags entfernen, verwenden Sie: vor auf die Spannen, und entfernen Sie die lil_arrow divs und ersetzen Sie mit: nach auf den Spannen. Dann entferne die div.bar und benutze: nach auf den Etiketten. Sie brauchen wahrscheinlich auch nicht die swanky_wrapper__content divs - benutzen Sie einfach die verschachtelte ul. Für ein viel saubereres Markup. –

Hier beginnt eine Überarbeitung. Fügen Sie einfach html hinzu, bereinigen Sie die Less/Css und fügen Sie Bild-URLs hinzu: https://codepen.io/anon/pen/pEkVBP –

nicht das height.let die div udjust die Höhe erwähnen entsprechend dem Inhalt

Quelle

2016-10-14 16:52:06

So stellen Sie die Höhe basierend auf dem Inhalt ein css

Antwort

Verwandte Themen