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

【问题标题】：Suggestions on improving my 2 column layout webpage关于改进我的 2 列布局网页的建议
【发布时间】：2019-10-22 13:34:20
【问题描述】：

所以自从我上次在这里玩 HTML 已经有一段时间了。我只是希望这里有另一双专家的眼睛来审查我的代码，看看我可以做些什么来改进我的 2 列响应式网站。 注意： 我放入 cmets 是为了更容易理解代码放置。

我试图将我的图像放在左列的中心，同时将我的文本保持在右侧。然后，当它进入平板电脑和移动设备时，一切都是中心。（一栏）。

我还注意到，当我调整浏览器的大小时，图像会在文本下方而不是在响应模式启动后越过文本。我该如何解决这个问题？我想轻松地从 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>

【问题讨论】：

标签： html css responsive-design responsive-images

【解决方案1】：

试试这个

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

【讨论】：