Jump to content

Нужен совет

a!max
a!max
in HTML, CSS, XML

Featured Replies

Posted
comment_128729

Здравствуйте. Имеются два блока: красный и синий. Изначально, синий блок находится под красным. 

<!DOCTYPE HTML>
<html>
<head>
  <title>TEST</title>
</head>
<body>
<style>
#block1, #block2 {
  display: block;
  width: 200px;
  height: 200px;
}

#block1 {
  background: red;
}

#block2 {
  background: blue;
}
</style>
  <div id="block1"></div>
  <div id="block2"></div>
</body>
</html>

Мне нужно сделать так, чтобы нижний синий блок был справа от красного вверху, т.е. они должны быть вместе по горизонтали.
Я сделал так: 

<!DOCTYPE HTML>
<html>
<head>
  <title>TEST</title>
</head>
<body>
<style>
#block1, #block2 {
  display: block;
  width: 200px;
  height: 200px;
}

#block1 {
  background: red;
  margin-bottom: -200px;
}

#block2 {
  background: blue;
  margin-left: 200px; 
}
</style>
  <div id="block1"></div>
  <div id="block2"></div>
</body>
</html>

Вопрос: Есть ли способ сделать это(разместить блоки (div) рядом по горизонтали) легче с помощью html или css ?

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/17396-nuzhen-sovet/
    Share on other sites
    comment_128730
    35 минут назад, maxaent сказал:

    легче с помощью html или css ?

    O.o

    Попробуйте только через HTMLo.OЯ так просто не умею. Интересно просто. 

    PS Конечно же через css

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/17396-nuzhen-sovet/?&do=findComment&comment=128730
    Share on other sites
    comment_128738

    Через css 

    <!DOCTYPE HTML>
<html>
<head>
  <title>TEST</title>
</head>
<body>
<style>
.block1 {
    padding: 5px; 
    float: left; 
    width: 200px; 
   }
.block2 {
       padding: 5px; 
       float: left; 
        width: 200px; 
   }
</style>
<div class="block1">
   Текст 111111
  </div>
  <div class="block2">
   Текст 22222
  </div>
</body>
</html>


     

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/17396-nuzhen-sovet/?&do=findComment&comment=128738
    Share on other sites
    • Author
    comment_128792
    18 часов назад, jack007 сказал:

    Через css 

    
<!DOCTYPE HTML>
<html>
<head>
  <title>TEST</title>
</head>
<body>
<style>
.block1 {
    padding: 5px; 
    float: left; 
    width: 200px; 
   }
.block2 {
       padding: 5px; 
       float: left; 
        width: 200px; 
   }
</style>
<div class="block1">
   Текст 111111
  </div>
  <div class="block2">
   Текст 22222
  </div>
</body>
</html>


     

    Тоже так пробовал, не получалось, я просто ставил только для 1го блока float, не знал, что для обоих надо обтекание ставить.

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/17396-nuzhen-sovet/?&do=findComment&comment=128792
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Ответить в этой теме...
    Go to topic listing

    Последние посетители 0

    • No registered users viewing this page.