3 DIVs, 1 Контейнер, горизонтально выровненный по горизонтали

У меня есть три DIV s, которые я положил в контейнер DIV.3 DIVs, 1 Контейнер, горизонтально выровненный по горизонтали

То, что я хочу, это выглядит следующим образом:

Demo image

Вот где я до:

#light-table { 
 
    background-color: #e2e2e2; 
 
    width: 100%; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    padding-left: 40px; 
 
    padding-right: 40px; 
 
    text-align: left; 
 
    margin-top: 30px; 
 
    margin-bottom: 30px; 
 
} 
 
#leftdiv { 
 
    float: left; 
 
    padding: 0 20px; 
 
    /*margin:20px 0;*/ 
 
    position: relative; 
 
    width: 25%; 
 
    flex-basis: 25%; 
 
} 
 
#leftdivcontainer { 
 
    vertical-align: middle; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
#light-table-paragraph { 
 
    font-family: 'Droid Serif'; 
 
    font-size: 20px; 
 
    color: #2e2e2e; 
 
    text-align: left; 
 
    line-height: 40px; 
 
}

<div id="light-table"> 
 
    <h3 id="light-table-head-style">content.</h3> 
 
    <div id="leftdivcontainer"> 
 
    <div id="leftdiv"> 
 
     <p id="light-table-paragraph">Left</p> 
 
    </div> 
 
    <div id="leftdiv"> 
 
     <p id="light-table-paragraph">Middle</p> 
 
    </div> 
 
    <div id="leftdiv"> 
 
     <p id="light-table-paragraph">Right</p> 
 
    </div> 
 
    </div> 
 
</div>

Пожалуйста, может кто-то помочь мне сказать, где я м не так?

Спасибо! Скотт

источник

2017-02-10 Scott Davies

Hey @Scott Davies - для начала замените 'id' на' class' в вашем HTML и '#' для '.' в вашем CSS для тех элементов, которые у вас есть более чем одного, поэтому' light-table- paragraph' и 'leftdiv' –

Спасибо, я пересмотрю использование. Можете ли вы сказать, что я новичок в этом? ха-ха. –

вам нужно где-то начать :) Удачи! –

Вот как Я бы сделал это.

Дайте каждое .leftdiv (на самом деле это должно быть классом, идентификаторы уникальны) 33% от общей ширины окна просмотра:

.leftdiv { 
    float: left; 
    width: 33%; 
}

и в центре каждый пункт внутри этих див, придать ему ширину 75%:

.leftdiv p { 
    display: block; 
    width: 75%; 
    margin: 0 auto !important; /* you won't need !important if your code is well structured */ 
}

Это более чистое решение, так как вы заметите, что нет горизонтальной прокрутки.

Here - код.

Кроме того, вам необходимо очистить родительский div #leftdivcontainer (это тоже).

Надеюсь, это поможет.

источник

2017-02-10 16:09:42

Спасибо большое, что сработало очарование. Я ценю это! –

Прохладный, @ScottDavies, рад, что я мог бы помочь! Вы считали, что принятый ответ лучше? Не забудьте поделиться проектом, когда он будет жить. ;) –

Возможно, я принял ответ по ошибке - я новичок в форуме, поэтому я поддержал пару вещей, потому что люди отнимали у них время от жизни, чтобы помочь мне :) Это живое на http: //scott.ewarena. com/blog, но это все еще работа в процессе :) –

установить DIV класс содержит три небольших DIVS display:flex и придать ей ширину контейнера 75%, а затем установите пространство вокруг содержания, как следующие:

#leftdiv { 
 
    /*float: left;*/ 
 
    padding:0 20px; 
 
    /*margin:20px 0;*/ 
 
    position:relative; 
 
    /* edits */ 
 
    width:33.33%; 
 
    flex-basis: 25%; 
 
} 
 

 
#leftdivcontainer { 
 
    vertical-align:middle; 
 
    text-align: center; 
 
    /* edits */ 
 
    width:75%; 
 
    display: flex; 
 
    margin: 0px auto; 
 
    justify-content: space-around; 
 
} 
 

 
#light-table-paragraph { 
 
    font-family: 'Droid Serif'; 
 
    font-size: 20px; 
 
    color: #2e2e2e; 
 
    text-align: left; 
 
    line-height:40px; 
 
} 
 

 
#light-table { 
 
    background-color: #e2e2e2; 
 
    width: 100%; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    padding-left: 40px; 
 
    padding-right: 40px; 
 
    text-align: left; 
 
    margin-top:30px; 
 
    margin-bottom: 30px; 
 
}

<div id="light-table"> 
 
    <h3 id="light-table-head-style">content.</h3> 
 
    <div id="leftdivcontainer"> 
 
    <div id="leftdiv"><p id="light-table-paragraph">Left</p></div> 
 
    <div id="leftdiv"><p id="light-table-paragraph">Middle</p></div> 
 
    <div id="leftdiv"><p id="light-table-paragraph">Right</p></div> 
 
    </div> 
 
    </div>

источник

2017-02-10 15:43:30 Mohammad

Да, вот-вот должен был сказать :) Добавить 'display: flex; justify-content: space-around; 'в контейнер :) @Scott, также исправить дублированные' id '. –

3 DIVs, 1 Контейнер, горизонтально выровненный по горизонтали

ответ

Смежные вопросы