Прошло много времени с тех пор, как я в последний раз играл с 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>