Как отобразить блок inline?

Question

Я работаю над страницей, на которой я должен разделить поля описания (называемые здесь block2) на четыре группы и отобразить 2 из них в каждой строке.Я добавил тег display:inline; в block2, но каждый блок отображается в новой строке.Я буду очень благодарен, если кто-нибудь сможет мне помочь.Спасибо Вот мой код,

.block2{
    width:auto;
    float:left;
    display:inline;
    background-color:#ECECEC;
    padding:17px 13px 21px 22px;
    margin:6px 6px 0 0;
    color:#636363
}
.block2 p{
    width:462px; 
    height:400px;  <!-- Height of the box containing details(one for all) -->
    float:left;
    padding:19px 0 13px 16px;
}
.block2 p img{
float:left;
margin:0 10px 7px 0
}

А ниже его HTML,

        <div class="block2">

                Provide here the details about first member 

        </div>

    <div class="block2">

            Member 2's details
        </div>

<div class="block2">



            Member 3's details

    </div>

<div class="block2">

            Member 4's details

    </div>

Answer 1

Если вы ищете правило display: inline-block.Вот оноНо я должен предупредить вас, что это может быть очень трогательное правило, на которое влияют пробелы в вашем HTML.

Но если вы просто пытаетесь остановить перекрытие, попробуйте удалить display:inline; из вашего .block2Правило CSS.

Answer 2

Вместо использования width для тега <p> вы можете использовать его для <div>.Я установил <div> width на 300px из-за padding и margin, которые вы использовали (также ширина превышала ширину контейнера), иначе вы можете установить width на 50%, что затемавтоматически отображает два <div> с в строке.

.block2{
    width:300px;
    float:left;
    display:inline;
    background-color:#ECECEC;
    padding:17px 13px 21px 22px;
    margin:6px 6px 0 0;
    color:#636363;
    border:1px solid red;
}
.block2 p{
    height:400px;  
    float:left;
    padding:19px 0 13px 16px;
    border:1px solid red;
}
.block2 p img{
float:left;
margin:0 10px 7px 0
}

Вот как я бы предпочел сделать, и я надеюсь, что это поможет вам .

.block2{
    width:50%;
    float:left;
    display:inline;
    background-color:#ECECEC;
    color:#636363;

}
.block2 p{
    height:400px;  
    float:left;
    padding:19px 0 13px 16px;
    border:1px solid red;

}
.block2 p img{
float:left;
margin:0 10px 7px 0
}

<div class="block2"><p>Provide here the details about first member </p></div>
<div class="block2"><p>Member 2's details</p></div>
<div class="block2"><p>Member 3's details</p></div>
<div class="block2"><p>Member 4's details</p></div>

Answer 3

Кажется, это была простая проблема с заполнением, когда ширина вызывала его переполнение. Рад, что помог!