问题：

超文本标记语言/CSS：容器div中的两个div

蔚承天

2023-03-14

因此，这又和我的另一个问题链接到同一个网站，这是另一个定位问题，可能很简单。我有一个容器div，我想在里面放两个div，一个占据容器的三分之一，在右边包含图片，一个包含文本，在左边。然而，由于某种原因，当告诉两个内部div向左浮动时，容器似乎消失了，而当使用inspect元素时，它处于一个我无法解释的奇怪位置。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Toby King - Home</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<div id="banner">
    <div class="menu">
        <div class="menuBit">
            <h2 class="menuContent">HOME</h2>
        </div>
        <div class="menuBit">
            <h2 class="menuContent">BLOG</h2>
        </div>
        <div class="menuBit">
            <h2 class="menuContent">WORK</h2>
        </div>
    </div>
</div>

<div class="main">
    <div class="textSection">
        <div class="mainTextSection">
            <h1 class="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus erat nec porttitor facilisis. In hac habitasse platea dictumst. Mauris id faucibus arcu. Mauris non orci mauris. Vivamus a porta odio. Praesent at purus ante. Quisque magna odio, elementum ut facilisis vitae, consequat at tellus. Praesent nulla est, ultrices sit amet sagittis eget, consequat id justo. Integer elementum in nibh eu ultricies. Integer fringilla urna in mollis accumsan. Etiam iaculis urna et malesuada tincidunt. Nunc dignissim purus eu tempor bibendum.</h1>
        </div>
        <div class="mainPictureSection">
            <img src="images/Example.svg">
        </div>
    </div>
</div>

<div id="footer">
    <h2 class="social">CONTACT:</h2>
    <img src="images/fb.png" class="social">
    <h2 class="social">some text</h2>
    <img src="images/insta.png" class="social">
    <h2 class="social">some text</h2>
</div>
</body>
</html>

CSS:

#banner {
    height: 50px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    position: fixed;
    background-image: url("images/menuHor.png");
}
.menuBit {
    height: 40px;
    width: 100px;
    margin: 0px;
    padding: 0px;
    float: left;
    margin-left: 10px;
}
.menuContent:hover {
    text-decoration: underline;
    cursor: pointer;
}
.menuContent {
    font-family: "cicle-gordita";
    font-size: 30px;
    text-align: center;
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
    color: #ffffff;
}
.main {
    position: fixed;
    margin: 0px;
    margin-top:50px;
    padding: 0px;
    width: 100%;
    height: 94.7916666667%;
    overflow: scroll;
    background: url("images/backgr.png");
}
.maintext {
    font-family: "cicle-gordita";
}
.textSection {
    width: 65%;
    height: auto;
    background: #FFFFFF; 
    margin-right: 17.5%;
    margin-left: 17.5%;
    margin-top: 2.5%;
    margin-bottom: 5%;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.mainPictureSection {
    height: auto;
    width: 21.67%;
    float: left;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}
.mainTextSection {
    height:auto;
    width: 43.33%;
    float: left;
    margin: 0px;
    padding: 0px;
}
#footer {
    width: 100%;
    height: 30px;
    clear: both;
    position: fixed;
    bottom: 0;
    background-image: url("images/menuHor.png");
}
.social {
    float: left;
    padding: 0;
    margin-top: 0px;
    margin-bottom: 2.5px;
    margin-left: 10px;
    font-family: "cicle-gordita";
    color: #ffffff;
}
.social h2 {
    margin-top: 5px;
}

Jscript/jQuery文件只是淡入淡出，但对定位没有影响

共有2个答案

徐洋

2023-03-14

若容器只有浮动子容器，其高度将塌陷，因为计算容器高度时未考虑浮动元素。您需要清除这些浮动元素，使容器实际包含浮动子元素。

一种方法是添加一个clearfix并将类放在容器元素上（取自http://nicolasgallagher.com/micro-clearfix-hack/）：

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

不过，有一种（不止一种）替代方法，最常见的可能是使用display:inline block而不是float:left。

不幸的是，看看下面的例子，你会发现它最初并不像预期的那样工作：

.container {
  background-color: #a00;
}
.child {
  background-color: #f0f0f0;
  display: inline-block;
  width: 50%;
}

<div class="container">
  <div class="child">Child One</div>
  <div class="child">Child Two</div>
</div>

罗宪

2023-03-14

将float:left更改为display:inline block应该是最好的方法。

显示：内联块添加空白。删除此项的一种方法是在divs之间添加注释：

<div class="container">
    <div class="child">
    </div><!--
    --><div class="child">
    </div>
</div>

或者像这样将divs内联：

<div class="container">
  <div class="child"></div><div class="child"></div>
</div>

若要在顶部对齐它们，请将垂直对齐：top添加到子div。

类似资料：

3行动态div高度基于内容和容器在CSS/超文本标记语言[重复]

我试图创建一个窗口，其中有一个头，内容和脚部分，所有3个部分的内容可以变化，我试图实现的是，头和脚的高度扩展，以适应他们的内容（可以是0px到300px的任何内容）和'内容'部分展开以填充容器中的剩余空间。如果'内容'框的内容太大，它应该显示滚动条。这是我到目前为止所拥有的：最后，我想让内容滚动到页眉和页脚后面，但这需要在顶部和底部的内容框中添加边距/填充，但页眉和页脚高度未知。如果我必须求
正确的超文本标记语言链接格式-两个div可以在一个标记内吗？[重复]

制作一个网站，使用带有（基本上是一幅图片），其中嵌套了一个div，可以在图片上显示文本。文本和图片div都是指向同一个地方的链接。我希望我的用户能够点击文本或图片上的任何地方，从页面导航。而不是使用两个标签，将链接到同一件事在同一行代码，我注意到我可以把两个div，图片和文本，在同一个标签和Chrome允许它不知道其他浏览器对这种事情的支持如何。下面是我正在做的一个例子：这是佳能吗？
在javascript中隐藏超文本标记语言

我正在工作的工具提示和从后端我将获得数据与html标记。我需要在工具提示中显示相应的标签中的相应数据。例如，我将从后端获得Hello用户单击此处。我必须显示为你好用户在h1格式，点击这里应该是一个锚。我尝试了这两个功能，并取代其不工作。具有以下功能：替换： https://codesandbox.io/s/serene-fast-u8fie?file=/App.svelte
如何包装文本在超文本标记语言前标记？

我试图在HTML的pre标签中包装文本，但它不起作用。我使用下面的CSS作为我的标签。我从如何在pre标记中换行文本？我已添加
带有超文本标记语言内容的工具提示

当你将鼠标悬停在网页的某个区域时，有很多基于JavaScript的库会显示工具提示。有些相当简单，有些允许工具提示显示用CSS样式设计的超文本标记语言内容。但是有没有一种方法可以在不使用JavaScript的情况下显示样式化的工具提示？如果您只是使用属性，标记不会被处理（例如
超文本标记语言净化器-允许链接？

这个网站是404'ing，所以我不能在那里搜索。我试着看了文档，但不清楚在哪里能找到。我做了一个配置与标签的列表，我想允许和包括

超文本标记语言/CSS：容器div中的两个div

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档