Inline-Stil verkürzt andere divs Breite

Question

Versuchen, eine Inline-Stil-Box mit Foundation 6 erstellen, aber die Breite von product-detail Verlust seiner vollen Breite. Warum?

HTML:

.box{ display: inline-flex } 
.product-detail{ left: 20px } 

Anfahrt .image und .product-detail ohne den Verlust der Breite in einer Zeile: Siehe unten

<div class="row"> 
    <div class="large-10 large-centered columns"> 
    <div class="box"> 
     <div class="image"> 
     ... 
     </div> 
     <div class="product-detail"> 
     ... 
     </div> 
    </div> 
    </div> 
</div> 

CSS aktualisiert?

Edit:

Entschuldigt nicht zu 100% genau zu sein. box enthält die card Klasse von bootstrap card. Also meine genauen html wie folgt aussehen:

<div class="row"> 
    <div class="large-10 large-centered columns"> 
    <div class="box"> 
     <div class="image"> 
     ... 
     </div> 
     <div class="card"> 
     <div class="card-block"> 
      <div class="product-detail"> 
      ... 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Sie können .image und .product-detail in eine Zeile einfügen, indem Sie ihre Eltern zu einem flexiblen Container machen.

.box { display: flex: } 

Anschließend können Sie steuern die Breite jedes Kind mit den width, flex-basis oder flex Eigenschaften.

Answer 2

img { 
 
    width: 100%; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.1/foundation-flex.css" rel="stylesheet" /> 
 

 

 
<div class="row"> 
 
    <div class="small-10 columns"> 
 
    <div class="row"> 
 
     <div class="small-10 columns"> 
 
     <div class="image"> 
 
      <img src="http://placehold.it/350x150"> 
 
     </div> 
 
     </div> 
 
     <div class="columns"> 
 
     <p class="product-detail"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="columns"> 
 
    There is two left over columns here unused 
 
    </div> 
 
</div>

Diese Version Gründungs ​​älter ist, weil ich eine CDN-Version, die hatte die Flex-Gitter in ihm verwenden wollte. Es stellt sich heraus, dass Sie, indem Sie nicht die Größe der Spalte angeben (in der zweiten Spalte für den Text) nur sagen, dass Sie den verbleibenden Platz einnehmen. Siehe: http://foundation.zurb.com/sites/docs/flex-grid.html

Hinweis: Wenn Sie testen, stellen Sie sicher, dass Sie zur vollständigen Seitenansicht wechseln ... denken Sie daran, dass das Raster reagiert.