主页 / 问题 / 1355041
Accepted
Vladimir Zhidelev
Asked:2022-04-29 02:46:39 +0000 UTC2022-04-29 02:46:39 +0000 UTC

如何在整个屏幕长度上将这些块排列成一行？

  • 772

表单必须位于屏幕右侧，图像（您可以放心地替换您自己的）应位于屏幕左侧 - 一切都如屏幕截图所示。像这样的东西应该看起来像

<html>
<head>
</head>
<body>
<div style="margin-top: 0px; width: 100%; font-family:arial;">
  <div style="overflow:hidden; float: left; width: 100%;">
    <div style="background-image: url(images/img21.jpg); background-position:center; background-size: cover; width:520px; height:700px;"></div>
  </div>
  <div style="width: 100%;">
   <div style="color: #ffffff; float: left; overflow:hidden; background-color: #1a1919; width:50%; height:700px;  font-size: 30px; text-align: center; ">
    <div style="margin-top: 30%;">
     <strong>Готов измениться?
   </br>
     Будет не просто, но</br> интересно! </strong>
   </div>
   <div style="margin-top: 6%; font-size:16px; left:150px; position:relative; text-align:left;">
     <strong>Оставь заявку и получи первую тренировку </br>бесплатно!</strong>
   
     <form>
      <ul>
        <li>
          <input style="background-color:#1a1919;" placeholder="Ваш Е-mail" border="0">
        </li>
        <li>
          <input style="background-color:#1a1919;" placeholder="Ваше Имя" border="0">
        </li>
        <li>
          <input style="background-color:#1a1919;" placeholder="Ваш номер телефона" border="0">
        </li>
      </ul>
    </form>
</body>
</html>

javascript

1 个回答

  1. Best Answer

    对于这两个块的公共容器，放置：

    display: flex;
flex-direction: row;

    忘记float就像一场噩梦。

    • 0

相关问题