處理flexbox佈局中的文本 - 如何避免文本跨其他元素？

-1

我有3個「容器」的flexbox佈局。兩條「線」和一個大的「容器」佔據了所有剩餘的空間。處理flexbox佈局中的文本 - 如何避免文本跨其他元素？

我的第一個「行」中的文本沒有「收縮」留在第一個「容器」內，而是低於第二個「行」。

我見過有一個nowrap屬性，但它似乎並沒有解決這種情況。

一個想法？

我試圖讓一個JSFiddle告訴你什麼是問題所在。我不知道爲什麼我的地圖沒有顯示。我希望文字在地圖上保持不變，不影響地圖。（即必須採取所有可用的地方）

HTML

<div class="box"> 
    <div id="header" class="text-center"> 
    <a href="/"></a>This is something I want to be displayed only on this line with no effect below</div> 
    <div id="lineboard"> 
    <div class="col-md-3">Word 1:</div> 
    <div class="col-md-3">Word 2</div> 
    <div class="col-md-3">Word 3</div> 
    <div class="col-md-3">Word 4</div> 
    </div> 
    <div id="map"></div> 
</div>

var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', 
    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors', 
    osm = L.tileLayer(osmUrl, { 
    maxZoom: 18, 
    attribution: osmAttrib 
    }); 

// initialize the map on the "map" div with a given center and zoom 
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

CSS

.box { 
    display: flex; 
    display: -webkit-flex; 
    flex-flow: column; 
    height: 100%; 
} 

#header { 
    font: 30px Georgia, serif; 
    flex: 0 1 auto; 
    margin-top: 10px; 
    height: 80px; 
    line-height: 80px; 
} 

#lineboard { 
    font: 20px Georgia, serif; 
    flex: 0 1 auto; 
    height: 50px; 
    line-height: 50px; 
    background-color: #1E3258; 
    color: white; 
    margin: 15px 0px 0px 0px; 
    text-align: center; 
} 

#map { 
    flex: 1 1 auto; 
    margin: 0px 0px 0px 0px; 
}

來源

2017-03-02 DavidK

您需要提供一些工作示例。 –

如果你想有文字包裹，並停留在第一個容器，但不會低於#lineboard你應該改變0在#header上的到min-height: 80px。

來源

2017-03-02 10:58:42

它不像我想要的那樣工作;地圖所佔用的空間被修改。 – DavidK

flex屬性似乎被覆蓋。 – DavidK

好的，我改變了答案。我希望這就是你想要做的。 = d –

處理flexbox佈局中的文本 - 如何避免文本跨其他元素？

回答

相關問題