Zwei divs nebeneinander, ohne Container

Question

Ich habe zwei Divs nebeneinander inline. Die Sache ist, ich kann HTML nicht bearbeiten und sie haben keinen Container. Um die Dinge noch komplizierter zu machen, muss das erste div breiter sein als das zweite div. Und ich habe keine Ahnung, wie man das macht und machen es ansprechend.

Das ist was ich bisher habe. Aber es reagiert nicht. Um es so zu machen, müsste ich es mit @media bearbeiten und ich versuche das wirklich zu vermeiden. Kann ich das sauberer machen? Eine Art, wie ich Flex vielleicht ohne einen Container benutzen könnte? Und machen Sie es auch ansprechbar, ohne es auf kleineren Geräten miteinander zu vermischen?

.one, 
 
.two { 
 
    float: left; 
 
} 
 

 
.one { 
 
    width: 66.66%; 
 
} 
 

 
.two { 
 
    width: 33.33%; 
 
}

<div class="one">content goes here</div> 
 
<div class="two">content goes here</div>

EDIT: Dies ist, was die Umrisse meines Code wie folgt aussieht, mit einem Behälter. Nur um euch über das Thema zu informieren. Div mit einem Klassenabschnitt - einer hat 5 Elemente im Inneren, und sie müssen inline und reaktionsschnell bleiben, wenn das Fenster in der Größe geändert wird, also möchte ich den Code, den ich gerade habe, nicht durcheinander bringen, weil er sich auf kleineren Bildschirmen gut verhält.

.container {} 
 

 
.heading { 
 
    text-align: center; 
 
    margin-bottom: 35px; 
 
} 
 

 
.section-one { 
 
    text-transform: uppercase; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    text-align: center; 
 
    justify-content: space-between; 
 
} 
 

 
.item { 
 
    position: relative; 
 
    flex-shrink: 0; 
 
    margin: 0 auto; 
 
    margin-bottom: 15px; 
 
} 
 

 
.section-left { 
 
    float: left; 
 
    text-transform: uppercase; 
 
    width: 66.66%; 
 
    margin-top: 80px; 
 
    padding-right: 80px; 
 
} 
 

 
.section-right { 
 
    float: left; 
 
    width: 33.33%; 
 
}

<div class="container"> 
 
    <div class="heading"> 
 
    <h2>Lorem ipsum dolor</h2> 
 
    <p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p> 
 
    </div> 
 
    <!--- /.heading --> 
 
    <div class="section-one"> 
 
    <div class="item">Praesent eu elementum.</div> 
 
    <div class="item">Praesent eu elementum.</div> 
 
    <div class="item">Praesent eu elementum.</div> 
 
    <div class="item">Praesent eu elementum.</div> 
 
    <div class="item">Praesent eu elementum.</div> 
 
    </div> 
 
    <!--- /.section-one --> 
 
    <div class="section-left"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed. 
 
    </div> 
 
    <!--- /.section-left --> 
 
    <div class="section-right"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed. 
 
    </div> 
 
    <!--- /.section-right --> 
 
</div>

Answer 1

die Tatsache, dass Sie bereits Flexbox Gegeben verwenden, schlage ich vor, Sie tun es auch dafür, wie diese.

Wenn Sie die container nicht wollen, nur seine Markup fallen und seine CSS-Eigenschaften auf die body

Fiddle demo

Stapel Snippet

.container { 
 
    display: flex;     /* added */ 
 
    flex-wrap: wrap;    /* added */ 
 
} 
 

 
.heading { 
 
    flex: 0 0 100%;     /* added, behaves like a block */ 
 
    text-align: center; 
 
    margin-bottom: 35px; 
 
} 
 

 
.section-one { 
 
    flex: 0 0 100%;     /* added, behaves like a block */ 
 
    text-transform: uppercase; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    text-align: center; 
 
    justify-content: space-between; 
 
} 
 

 
.item { 
 
    position: relative; 
 
    flex-shrink: 0; 
 
    margin: 0 auto; 
 
    margin-bottom: 15px; 
 
} 
 

 
.section-left { 
 
    flex: 1 0 66.666%;    /* added, behaves like an inline-block but fill when on single line */ 
 
    min-width: 400px; 
 
    text-transform: uppercase; 
 
    margin-top: 80px; 
 
    padding-right: 80px; 
 
    box-sizing: border-box;   /* added, make padding be included in set width */ 
 
    border: 1px dotted gray;  /* demo purpose */ 
 
} 
 

 
.section-right { 
 
    flex: 1 0 33.333%;    /* added, behaves like an inline-block but fill when on single line */ 
 
    min-width: 200px; 
 
    box-sizing: border-box;   /* added, make border be included in set width */  
 
    border: 1px dotted gray;  /* demo purpose */ 
 
}

<div class="container"> 
 
    <div class="heading"> 
 
    <h2>Lorem ipsum dolor</h2> 
 
    <p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p> 
 
    </div> 
 
    <!--- /.heading --> 
 
    <div class="section-one"> 
 
    <div class="item">Praesent eu elementum.</div> 
 
    <div class="item">Praesent eu elementum.</div> 
 
    <div class="item">Praesent eu elementum.</div> 
 
    <div class="item">Praesent eu elementum.</div> 
 
    <div class="item">Praesent eu elementum.</div> 
 
    </div> 
 
    <!--- /.section-one --> 
 
    <div class="section-left"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed. 
 
    </div> 
 
    <!--- /.section-left --> 
 
    <div class="section-right"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed. 
 
    </div> 
 
    <!--- /.section-right --> 
 
</div>

Answer 2

Ich schlage vor, Sie eine Medien Abfrage verwenden sowieso Ihre divs auf der jeweils anderen auf kleinen Geräten zu machen, vor allem, wenn Sie Textinhalt haben. Die max-width ich mit dir geben, ist nur ein Beispiel

@media screen and (max-width: 480px) { 
    .one, 
    .two { 
     float: none; 
     width: 100%; 
    } 
} 

Ich würde Ihnen gerne vorschlagen, den Flex-Box-Eigenschaft, aber wenn man nicht einen Container bekommen haben und können den HTML nicht ändern, diese wird kompliziert sein. Hier ist der Link sowieso: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Mit Flexbox, die Sie gerade die Eigenschaft zu Ihrem Container geben müssen:

.container { 
    display: flex; 
} 

Dann können Sie die Art und Weise Sie Ihre Elemente wollen wählen sortieren:

.container { 
    flex-direction: row; 
} 

Auch dies ist ein Beispiel, überprüfen Sie den Link, den ich Ihnen für weitere Informationen gegeben habe.

Answer 3

könnten Sie CSS calc() function verwenden mitsch mit display:inline-block statt float beide divs ohne Verwendung von media query Reaktion darauf auszurichten.

Aber da beide divs sind Display als inline-block und wenn Inline-Block mit fügt es white-space um es Block, zu entfernen, dass ich font-size:0 in body Tag verwendet haben, so auf die verbleibenden Block in Ihrem Design Sie font-size manuell zuweisen oder sonst ist Text nicht sichtbar.

body{ 
 
    font-size:0; 
 
    margin:0; 
 
} 
 
.one{ 
 
    display:inline-block; 
 
    background:pink; 
 
    width:calc(100vw - 40vw); 
 
    font-size:16px; 
 
} 
 
.two{ 
 
    display:inline-block; 
 
    background:pink; 
 
    width:calc(100vw - 60vw); 
 
    font-size:16px; 
 
}

<div class="cont"> 
 
<div class="one">content goes here</div> 
 
<div class="two">content goes here</div> 
 
</div>

Answer 4

bewegen

Sie müssen box-sizing zurücksetzen, um padding und border in die Breitenberechnung einzubeziehen.

Die CSS box-sizing Eigenschaft wird verwendet, um das Standard-CSS-Box-Modell Breite und Höhe der Elemente verwendet, zu ändern, zu berechnen.

Ein media query wird helfen, sie zu häufen, wenn die Boxen zu klein werden.

Media Queries nützlich sind, wenn Sie die je CSS-Stile anwenden möchten auf einem Gerät allgemeinen Art (wie Print vs. Bildschirm), spezifischen Eigenschaften (wie die Breite des Browser-Darstellungsfeld) oder Umwelt (wie Umgebungslichtbedingungen). Angesichts der großen Vielfalt an Geräten, die heute mit dem Internet verbunden sind, sind Medienanfragen ein wichtiges Werkzeug für die Erstellung von Websites und Apps, die robust genug sind, um auf der Hardware Ihrer Benutzer zu funktionieren.

Beispiel

.container {} 
 

 
.heading { 
 
    text-align: center; 
 
    margin-bottom: 35px; 
 
} 
 

 
.section-one { 
 
    text-transform: uppercase; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    text-align: center; 
 
    justify-content: space-between; 
 
} 
 

 
.item { 
 
    position: relative; 
 
    flex-shrink: 0; 
 
    margin: 0 auto; 
 
    margin-bottom: 15px; 
 
} 
 

 
.section-left { 
 
    float: left; 
 
    text-transform: uppercase; 
 
    width: 66.66%; 
 
    /*margin-top: 80px; remove */ 
 
    padding-right: 80px; 
 
} 
 

 
.section-right { 
 
    float: left; 
 
    width: 33.33%; 
 
} 
 

 
/* updates */ 
 

 
    .section-left, 
 
    .section-right { 
 
    box-sizing:border-box; 
 
    } 
 

 
@media all and (max-width : 599px) { 
 
    .section-left, 
 
    .section-right { 
 
    width:100%; 
 
    padding:1em; 
 
    } 
 
} 
 

 
/* let's see them */ 
 
div { 
 
    box-shadow:0 0 0 2px green; 
 
}

<div class="container"> 
 
    <div class="heading"> 
 
    <h2>Lorem ipsum dolor</h2> 
 
    <p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p> 
 
    </div> 
 
    <!--- /.heading --> 
 
    <div class="section-one"> 
 
    <div class="item">Praesent eu elementum.</div> 
 
    <div class="item">Praesent eu elementum.</div> 
 
    <div class="item">Praesent eu elementum.</div> 
 
    <div class="item">Praesent eu elementum.</div> 
 
    <div class="item">Praesent eu elementum.</div> 
 
    </div> 
 
    <!--- /.section-one --> 
 
    <div class="section-left"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed. 
 
    </div> 
 
    <!--- /.section-left --> 
 
    <div class="section-right"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed. 
 
    </div> 
 
    <!--- /.section-right --> 
 
</div>