Question

自从我上一次在这里玩HTML以来已经有一段时间了。我只想让另一对专家在这里查看我的代码，看看我可以做些什么来改善我的2栏式响应式网站。 注意： 我添加了一些注释，以使对代码放置的理解更加容易。

我正在尝试将图像居中放置在左侧栏中，同时将文本保持在右侧。然后，当它进入平板电脑和移动设备时，一切便成为中心。（一栏）。

我还注意到，当我调整浏览器的大小时，图像将位于文本下方，而不是在响应模式启动后遍历文本。我该如何解决？我想轻松地从2列平滑过渡到1列。

* {
  box-sizing: border-box;
}


/* ---------- Font family ---------- */

body {
  font-family: Arial, Helvetica, sans-serif;
}


/* ---------- Header styling ---------- */

.header {
  padding: 60px;
  /* some padding */
  text-align: center;
  /* center the text */
  background: #00e68a;
  /* background */
  color: black;
  /* white text color */
}


/* Increase the font size of the <h1> element */

.header h1 {
  font-size: 40px;
}


/* ---------- Navbar styling ---------- */


/* Style the navigation menu */

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}


/* Hide the links inside the navigation menu (except for logo/home) */

.topnav #myLinks {
  display: none;
}


/* Style navigation menu links */

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}


/* Style the hamburger menu */

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}


/* Add a grey background color on mouse-over */

.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Style the active link (or home/logo) */

.active {
  background-color: #4CAF50;
  color: white;
}


/* ---------- 2-column layout styling ---------- */


/* Create two equal columns that floats next to each other */

.column {
  float: left;
  width: 50%;
  padding: 10px;
}

.img1 {
  margin-left: 50%;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .futa3 {
    margin-left: 150px;
  }
  .column {
    width: 100%;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Douglas Homepage</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>


  <div class="header">
    <h1>Title Website</h1>
    <p>This is a website created by me.</p>
  </div>


  <!-- Load an icon library to show a hamburger menu (bars) on small screens -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Top Navigation Menu -->
  <div class="topnav">
    <a href="#home" class="active">Home</a>
    <!-- Navigation links (hidden by default) -->
    <div id="myLinks">
      <a href="#news">Home</a>
      <a href="#contact">About Me</a>
      <a href="#about">Contact</a>
    </div>
    <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>


  <!-- Javascript for navbar -->
  <script>
    /* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
    function myFunction() {
      var x = document.getElementById("myLinks");
      if (x.style.display === "block") {
        x.style.display = "none";
      } else {
        x.style.display = "block";
      }
    }
  </script>


  <div class="row">

    <div class="column">
      <div class="img1">
        <img src="https://images.fineartamerica.com/images-medium-large/wolf-green-james-ahn.jpg" alt="img1" style="width: 200px; height: 300px;">
      </div>
    </div>

    <div class="column">
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
        sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      </p>
    </div>

  </div>


</body>

</html>

Answer 1

尝试一下

.img1 {
  margin-left: 50%;
  transform: translateX(-50%);
}

关于改进我的2列布局网页的建议

1 个答案: