Невозможно разместить предметы равномерно в сетчатом контейнере - PullRequest
Новая
       6

Невозможно разместить предметы равномерно в сетчатом контейнере

0 голосов
/ 05 марта 2020

На картинке ниже, как мне избавиться от перекрывающихся элементов div. Пытался использовать flexbox для моих настроек, но не смог решить проблему, теперь я на CSS Gird System. Я пытаюсь получить значок, затем небольшой пробел, затем число, полностью видимое в той же строке, затем снова небольшой пробел и, наконец, красное число, видимое в дальнем правом углу. Ниже мои CSS и HTML: 

<div class="main-container">
        <lightning-card class="slds-p-right_small" variant="narrow" icon-name="utility:tracker">
            <h1 slot="title" style="font-style:normal; font-family:'Candara';"><strong>BRITISH COLUMBIA</strong></h1>
            <hr class="titleDivider">
            <div id="bcDiv" class="city-scroll-section" onscroll={loadMoreonScrollEnd} data-id="BC">
            <template for:each={bc} for:item="city">
                <div class="grid-container" key={city.Id}>
                    <div class="grid-column-cityName">
                        <div style="color: rgb(28, 69, 145);"><strong>{city.Name}</strong></div>
                    </div>
                    <div class="mini-grid-container">
                        <div style="display: grid; grid-template-columns:1fr 3fr">
                            <span><lightning-icon icon-name="utility:company" size="small"></lightning-icon></span>
                            <!-- <span><b>{city.sumchans__Total_Buildings__c}</b></span> -->
                            <span><b>10000000</b></span>
                        </div>
                        <div>
                            <template for:each={city.sumchans__City_Stats__r} for:item="stats">
                                <div key={stats.Id}
                                    style="color: rgb(197, 81, 61);font-size:14px;">
                                    <span><strong>{stats.sumchans__Penetration__c}%</strong></span></div>
                            </template>
                        </div>
                    </div>
                </div>
                <hr class="divider" key={city.Id}>
            </template>
        </div>
        </lightning-card>      
    </div>

CSS: 

 .divider { 
    margin-top: 3px; 
    margin-bottom: 2px;
    border-width:0.2px; 
    border: 1px dotted #81b9fa;
    border-style: none none dotted; 
}
.titleDivider {
    margin-top: 1px; 
    margin-bottom: 1px;
    border-width:3px; 
    border-color:rgb(36, 36, 71);
}
.main-container {
    display: grid;
    justify-content: center;
    /* width:500px; */
}
.grid-container {
    display: grid;
    grid-template-columns: 60% 40% ;
    /* grid-template-rows: auto;  */
}
.grid-column-cityName {
    margin: 10px 0px 10px 7px;
    border-radius: 5px;
    /* background-color: rgb(249, 252, 255); */
}
.mini-grid-container {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
}
.city-scroll-section {
    height:180px;
    overflow-y: scroll;
    scroll-behavior: smooth;
    /* scrollbar-width: none; */
}
.city-scroll-section::-webkit-scrollbar {
    width: 0px;
}

enter image description here

1 Ответ

1 голос
/ 05 марта 2020

Вы можете сделать с display: flex; и justify-content: space -ween; , элементы внутри .boxes будут занимать поля в соответствии с шириной . Коробки 

.boxes{
width:300px;
display:grid;
grid-template-columns:1.4fr 2fr;
border:2px solid;
padding:5px;
}

.boxes .right{

display:flex;
flex-direction:row;
justify-content:space-between;
}
<div class="boxes">
<div class="left">
<p>test</p>
</div>
<div class="right">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
...