主页 / 问题 / 1255721
Accepted
EvilBDSM
Asked:2022-03-14 21:15:02 +0000 UTC2022-03-14 21:15:02 +0000 UTC

为什么左块不与页脚相邻？

  • 772

我需要做这样的事情（不要注意第1张和第2张图的文字对齐方式不同，现在没关系）：

这就是我需要的

我编写了代码，使其适应我的任务条件（我将附上下面的代码），这就是发生的事情：

发生了什么

问题：1）左块不与页脚相邻；2）链接不应该那样，它们应该是白色的。如何解决这些问题？似乎是一个愚蠢的问题，但我似乎无法找到解决方案。

索引.html：

<!DOCTYPE HTML>
<html>
<head><title>Block_Verstka</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<bodylink="white" alink="red">
<div class="all">
<div class="logo">
<img src="Lighthouse.jpg" height="100" width="250">
</div>
    <div class="top">Хедер</div>
    <div class="left">MENU<p><a></a></p> 
<p><a href="1.htm">Главная</a></p>
<p><a href="2.htm">История</a></p>
<p><a href="3.htm">Галерея</а></р>
<p><a></a></p>
</div>
    <div class="content">
<pre></pre>
<p>Существуют две основные трактовки понятия «текст»: имманентная (расширенная, философски нагруженная) и репрезентативная (более частная). Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры. Репрезентативный — рассмотрение текста как особой формы представления информации о внешней тексту действительности.</р>
<p align="center"><img src="dog.jpg" height="100" width="120"></p>
</div>
<div class="clear"></div>
    <div class="footer">Footer 
    <p>ФУтЕр</p></div>
    </div></body></html>

样式.css：

body, html { 
    width: 100%;
        min-width: 1000px;
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: tahoma;
        background: #ffffff;
        color: #ffffff;
}

.all {
    width: 1000px;
        margin: 0 auto;
}

.logo {
    background: #009e9d; 
    width: 250px;
    height: 100px; 
    padding: 10px 0; 
    float: left;
}

.top {
    background: #009e9d; 
        width: 750px; 
        height: 100px; 
        float: left; 
    padding: 10px 0; 
    font-size: 30px; 
    line-height: 24px; 
    text-align: center;
    text-transform: uppercase; 
}

.left {
    background: #0010d5; 
    float: left; 
    width: 250px; 
    height: З00рх;
    font-size: 20px; 
    text-align: center; 
    text-transform: uppercase;
}

.content {
    background: #97969b; 
    float: left; 
    width: 750px; 
    height: 300рх; 
        text-indent: 20; 
        text-indent: 10 px;
        line-height: 24px;
        text-align: justify; 
    font-family: tahoma;
}

.clear { 
    clear: both;
}

.footer {
    background: #28282a; 
    padding: 100px 0; 
    padding: 50px 0; 
    font-size: 20px; 
    line-height: 24px; 
    text-align: center; 
    text-transform: uppercase;
}
html

2 个回答

  1. 通过范围模拟@Sevastopol 的答案：

    * {margin: 0; color: white;}

.container {
  display: grid;
  grid-template-columns: 25% 1fr;
  grid-template-rows: 15% 1fr 15%;
  grid-template-areas: "header header" "sidebar content" "footer footer";
  min-height: 100vh;
}

.header {
  grid-area: header;
  background: mediumseagreen;
}

.footer {
  grid-area: footer;
  background: black;
}

.sidebar {
  grid-area: sidebar;
  background: cornflowerblue;
}

.content {
  grid-area: content;
  background: darkgray;
}
    <div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Text</div>
  <div class="footer">Footer</div>
</div>

    • 3
  2. Best Answer

    这是您的标记。网格。看看一切是多么简单、美丽、合乎逻辑和色情：

    * {margin: 0; color: white;}

.container {
  display: grid; grid-template-columns: repeat(4, 1fr); min-height: 100vh;
}

.header {
  grid-column: span 4 / auto; height: 15vh; background: mediumseagreen;
}

.footer {
  grid-column: span 4 / auto; height: 15vh; background: black;
}

.sidebar {
  grid-column: span 1 / auto; min-height: 70vh; background: cornflowerblue;
}

.content {
  grid-column: span 3 / auto; min-height: 70vh; background: darkgray;
}
    <div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Text</div>
  <div class="footer">Footer</div>
</div>

    弹性。此外，一切都很简单、美丽、合乎逻辑，但不色情：

    * {margin: 0; color: white;}

.container {min-height: 100vh;}

.header {height: 15vh; background: mediumseagreen;}
.footer {height: 15vh; background: black;}

.box {display: flex; min-height: 70vh;}

.sidebar {flex: 1 1 auto; background: cornflowerblue;}
.content {flex: 4 1 auto; background: darkgray;}
    <div class="container">
  <div class="header">Header</div>
  <div class="box">
    <div class="sidebar">Sidebar</div>
    <div class="content">Text</div>
  </div>
  <div class="footer">Footer</div>
</div>

    和inline-block+ float。一切也很简单，看起来既美丽又合乎逻辑，但一点也不色情：

    * {margin: 0; color: white;}

.container {min-height: 100vh;}

.header {height: 15vh; background: mediumseagreen;}
.footer {height: 15vh; background: black;}

.box {min-height: 70vh;}

.sidebar {
  float: left; display: inline-block; width: 25%; min-height: 70vh;
  background: cornflowerblue;
}
.content {
  display: inline-block; width: 75%; min-height: 70vh;
  background: darkgray;
}
    <div class="container">
  <div class="header">Header</div>
  <div class="box">
    <div class="sidebar">Sidebar</div>
    <div class="content">Text</div>
  </div>
  <div class="footer">Footer</div>
</div>

    • 1

相关问题