В div 2 div: javascript — Нужно расположить 2 div-а рядом друг с другом, двумя колонками

html — Как соединить два блока div?

Вопрос задан 1 год 6 месяцев назад

Изменён 2 месяца назад

Просмотрен 1k раз

как склеить два блока? только начал верстать, новичок.

    <div>
        <div>
            <img src="img/me.jpg" alt="123">
        </div>
        <div>
            <button><i></i></button>
            <button><i></i></button>
            <button><i></i></button>
        </div>
    </div>
.info-block {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    flex: 10%;
    background-color: #cabcbc;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
}
.  social_links {
    width: auto;
    background-color:white;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    display:flex;
    align-items: center;
}
.btn {
    height: 50px;
    width: 50px;
    margin-left:auto;
    margin-right: auto;
    border-radius: 50%;
    background-color: dodgerblue;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

• html
• css
• html5

2

в .info-block сделайте font-size: 0px; пропуск возникает из-за перевода строки и кучи пробелов в кода:

    </div>
    <div>

.info-block {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    flex: 10%;
    background-color: #cabcbc;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
    
    font-size: 0px;
}
.social_links {
    width: auto;
    background-color:white;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    display:flex;
    align-items: center;
}
.
  btn {
    height: 50px;
    width: 50px;
    margin-left:auto;
    margin-right: auto;
    border-radius: 50%;
    background-color: dodgerblue;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

    <div>
        <div>
            <img src="https://news-ru.gismeteo.st/2018/10/fdbd1811.jpg" alt="123">
        </div>
        <div>
            <button><i></i></button>
            <button><i></i></button>
            <button><i></i></button>
        </div>
    </div>

2

Попробуйте прописать в стилях это:

*{
   margin: 0;
   padding: 0;
}

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — Как разместить по 2 div со свойством float в контейнере

Задать вопрос

Вопрос задан 5 лет 6 месяцев назад

Изменён 5 лет 6 месяцев назад

Просмотрен 422 раза

У меня есть контейнер к примеру размером 480

Есть внутри четыре блока. размером 230 в ширину, и margin-right:20px;

Мне нужно сделать так что бы эти элементы раместились по 2 в ряд в родительском контейнере.

P.S мне не нужно предлагать устанавливать в цикле margin-right:0 при условие $i % 2 ! так как этот вопрос для меня важно решить путем css

Кстати, возможно есть другой способ сделать то что мне надо.

Мне по сути надо разместить элементы (div размером 230) внутри контейнера 480 так, что бы между элементами был отступ 20 пикс.

• html
• css
• css3

2

div.parent{
  width: 480px;
}
div.child{
  width: 230px;
  margin: 0 10px 0 0;
  background: red;
  float: left;
}
div.child:nth-child(2n+2){
  margin: 0 0 0 10px;
  background: yellow;
}

<div>
  <div>1</div>
  <div>2</div>
</div>

Как-то так ))

.parent {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    justify-content: space-between;
    -ms-align-items: center;
    align-items: center;
    width: 480px;
}
.
  child {
    width: 230px;
    text-align: center;
    background: #547bd1;
}
<div>
    <div>left</div>
    <div>right</div>
</div>

Или как-то так))

Или так

.parent {
  margin-right: -10px;
  margin-left: -10px;
  width: 480px;
}
.child {
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  width: 230px;
  text-align: center;
  background: #547bd1;
}
<div>
  <div>left</div>
  <div>right</div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — css позиционирует 2 div в div

спросил 11 лет, 4 месяца назад

Изменено 11 лет, 4 месяца назад

Просмотрено 6к раз

у меня есть основной блок шириной 100% и 2 блока в нем. один имеет ширину 200 пикселей, а другой будет 100%-200 пикселей, я имею в виду;

 ------------------ это основной раздел -------------
 | |
 | ----subdiv1---- -------------subdiv2----------|
 || | | ||
 | -------------- ---------------------------- |
 |--------------------------------------------------------------|
 

subdiv1 имеет ширину 200 px, ширина subdiv2 будет остальной частью пустого пространства. Я ищу в Google, но не могу найти.

• css
• html
• позиционирование

0

Вот одно из возможных решений, которое я взломал, используя число с плавающей запятой : правило left для самого левого div и правило margin-left для правого div: http://jsfiddle.

net/P4xMj/

Пример HTML:

 

    <дел>
        Некоторый контент здесь
    
    <дел>
        Еще немного контента идет здесь справа. Давайте сделаем это
        содержание очень долго, чтобы увидеть, что произойдет, когда мы обернем больше, чем
        стоит одна или две строки. Дополнительный текст, чтобы заполнить пустоту.