0
Ich habe ein Problem mit der Art, wie meine Container gebaut werden. Ich habe zwei Zeilen mit zwei Spalten in jeder Zeile. Denken Sie an 4 Quadranten (siehe Bild unten). Der untere linke Quadrant geht in den oberen rechten Quadranten.Extrarand unter floated Elementen
Ich verwende Floats, um Positionen für verschiedene Ansichtsfenster zu wechseln, daher sind Floats ein Muss. Ich habe mich eine Weile an dieses Thema gehalten und kann es einfach nicht herausfinden.
Ich habe eine Snap-Show von dem, was es tut. Abgesehen vom unteren linken Quadranten, der in den oberen rechten Quadranten eintritt, gibt es eine Lücke zwischen den Reihen.
Ich habe auch eine Geige aufgenommen. Sieht jemand was vor sich geht?
.section-blocks {
\t width: 50%;
\t height: auto;
\t display: inline-block;
\t vertical-align: top;
}
.section-block-img {
\t height: 100%;
\t width: 100%;
}
.left {
\t float: left;
}
.right {
\t float: right;
}
#company-information {
\t width: 100%;
\t height: auto;
}
.company-information-block-title, .company-information-block-title2, .company-information-block-general-title, .company-information-block-description {
\t color: #313743;
\t line-height: 1.4em;
}
.company-information-block-title {
\t font-size: 1.6em;
\t margin-bottom: 20px;
}
.company-information-block-title2 {
\t font-size: 3.2em;
\t margin-bottom: 40px;
\t font-weight: bold;
\t color: #0085A1;
}
.company-information-block-general-title {
\t font-size: 2.2em;
\t margin-bottom: 40px;
\t font-weight: bold;
}
.company-information-block-description {
\t font-size: 1.2em;
\t margin-bottom: 40px;
}
#company-information-block2 {
\t height: auto;
}
#company-slider-section {
width: 100%;
height: auto;
position: relative;
}
div#slider {
width: 100%;
overflow: hidden;
position: relative;
}
#responsive-section {
\t width: 100%;
\t height: auto;
}
#responsive-block1 {
\t float: left;
\t height: 100%;
\t width: 40%;
\t position: relative;
}
#responsive-block2 {
\t float: right;
\t height: auto;
\t width: 60%;
\t overflow: hidden;
}
#responsive-block2 img {
\t width: 100%;
\t height: auto;
}<div class="section-blocks right">
\t \t \t <div class="company-container">
\t \t \t \t <div class="company-information-block-general-title">COMPANY STORY</div>
\t \t \t \t <div class="company-information-block-description">
\t \t \t \t \t <p>fdhsia fid afdan fndsanfdn fnfd fksanfanfd nfdanfan nfanafn dfnejwaoN F[gnf nr rnreogn aonrkngrnrnasng r narnrnoangrfkdkgraarmng aa arngrnga;aggkrioa anrnr argnkrg gagnrgng g grkrn g g rgn e gan ggn as</p><br><br>
\t \t \t \t \t <p>Ohtgfd htgdh thtrh trh rt sdfhh htsh shfh tsh sshh hs thhth shgsndfsank kfdnsak fndnkfdsa nkf f ndaiof nfasoanovn ndan fna gn an gnalnasgng agngna na nngfen grana akn gngaananogn</p>
\t \t \t \t \t
\t \t \t \t </div>
\t \t \t </div>
\t \t </div><div id="company-slider-section">
\t \t \t <div class="section-blocks left">
\t \t \t <div id="slider" class="slider">
\t \t \t <figure class="figure figure2">
\t \t \t \t <div class="slide-wrapper">
\t \t \t \t <div class="slide"><img src="http://optimumwebdesigns.com/images/work/projects/eslich/es-test1.jpg" alt class="slide-image"></div>
\t \t \t \t </div>
\t \t \t </figure>
\t \t \t </div>
\t \t </div>
\t </div>
\t <div id="responsive-section">
\t \t <div id="responsive-block1">
\t \t \t <div class="company-container">
\t \t \t \t <div class="company-information-block-general-title">INDUSTRY SPECIFIC</div>
\t \t \t \t <div class="company-information-block-description"></div>
\t \t \t </div>
\t \t </div>
\t \t <div id="responsive-block2">
\t \t \t <img src="http://optimumwebdesigns.com/images/work/projects/eslich/es-test3.jpg" alt>
\t \t </div>
\t </div>
Sie 'margin-bottom' auf den' .block-title' Elemente haben. – BillyNate
Das Ändern dieser Elemente in den Abstand hat dieses Problem nicht behoben. Trotzdem danke. – Becky
Ich habe nie gesagt, dass Sie es in Padding ändern sollten. Warum nicht sie entfernen? – BillyNate