html - css float error, element doesn't float adjacent to the div preceding-6ren

html - css float error, element doesn't float adjacent to the div preceding

转载作者：行者123 更新时间：2023-11-28 06:14:45

25

4

我想在另一个 div 旁边 float 一个 div。但无法实现这一点，两个 div 之间有一个空白区域，而且 float 也没有达到我想要的方式。

https://jsbin.com/fevuteseja/edit?html,css

我想做的是，让右边的 div float 到与它之前结束的 div 相邻的位置，并且也从同一层开始

body, div, h1, span, code, p, mark, em, ul, li {margin:0px; padding:0px}
            body {background-color:slategray}
            .topnav {height:30px;}
            .topnav ul{
                list-style-type:none;
                background-color:#404040; 
                height:30px;
            }
            .topnav ul li {float:left;}
            .topnav ul li a {
                  display:block;
                  color:white;
                  text-decoration:none;
                  padding:6px 15px 4px;
                  font-family:calibri;
                  font-size:13px;
                  height:20px;
            }
            .topnav ul li a:hover {background-color:#3399ff}/*background-color:black;*/
            .sidenav {width:12%;position:fixed;height:100%;}
            .sidenav ul {
                list-style-type:none; 
                width:12%;height:100%;position:fixed;
                background-color:#f2f2f2;
            }
            .sidenav ul li a{
                display:block;
                padding: 5px 0px 5px 15px;
                text-decoration:none;
                color:black;
                font-family:calibri;
                font-size:11.0px;
                letter-spacing: 1.5px
            }
            .sidenav li a:hover:not(.active) {
                background-color:#bfbfbf; 
                color:white
            }
            .sidenav ul li a.active {
                background-color:#3399ff; 
                color:white;
            }
            .sidenav_heading {display:block; padding:5px 5px; margin:2px; font-family:calibri}
            .blank{margin-left:12%;height:15px;background-color: aqa}
            .container-main{font-family:calibri; margin-left:12%; display:inline-block; width:550px;padding-bottom:20px;background-color:hotpink}
            .container-main h1{width:530px;margin-bottom:15px;margin-left:20px;background-color: chartreuse}
            .container-main-block{margin-left:20px;padding-bottom:10px;padding-top:10px;border-left:3px solid #339cff;background-color:#e6f3ff}
            .container-main p{width:500px;padding-left:12px;}
            mark {background-color:#99b3ff;color:white}
            .container-example{background-color:blue;display:inline-block;margin-top:0px;}

<!doctype html>
<html>
    <head>
        <title>Webden</title>
        <meta charset="utf-8" />
        <meta http-equiv="content-type" content="text/html, charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    
    <body>
        <div class="topnav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="">About</a></li>
            </ul>
        </div>
        <div class="sidenav">
            <ul>
                <span class="sidenav_heading">CSS Tag Reference</span>
                <li><a href="1.html" class="active">Background</a></li>
                <li><a href="2.html ">Borders</a></li>
                <li><a href="">Color</a></li>
            </ul>
        </div>
        <div class="blank"></div>
        <div class="container-main">
            <h1>CSS Backgrounds</h1>
            <div class="container-main-block">
            <p>Background property helps to achieve control over the background properties of any element in HTML.</p>
            <p><mark><em>background:</em></mark> is a shorthand property, that can be used as shown besides.</p>
            </div>
        </div>
        <div class="container-example">
                <h1>background-color:red</h1>
        </div>
    </body>
</html>

最佳答案

请使用这个:

.container-main {
    background-color: hotpink;
    display: inline-block;
    float: left;
    font-family: calibri;
    margin-left: 12%;
    padding-bottom: 20px;
    width: 550px;
}

关于html - css float error, element doesn't float adjacent to the div preceding，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35961305/

25

4

0

文章推荐： javascript - 尝试用动态内容填充共享 Twitter 链接

文章推荐： javascript - Webpack - 将应用程序部署到不同的环境

c# - 无法从 Func 转换为 Func
我对这个错误很困惑: Cannot implicitly convert type 'System.Func [c:\Program Files (x86)\Reference Assemblies\
rust - 所有 T、&T、&mut T、[T]、&[T]、*mut T 的通用实现
考虑这段代码: pub trait Hello { fn hello(&self); } impl Hello for Any { fn hello(&self) {
c++ - "T t = {};"和 "T t{};"可以产生不同的结果吗？
问题很简单。是否可以构造这样一个类型 T，对于它下面的两个变量声明会产生不同的结果？ T t1 = {}; T t2{}; 我已经研究 cppreference 和标准一个多小时了，我了解以下内容:
java - Comparator中的compare(T,T)不能应用于(T,T)
Intellij idea 给我这个错误:“Compare (T, T) in Comparator cannot be applied to (T, T)” 对于以下代码: public class
php -\n\t\t\t\t\在php中的含义和用途是什么
任何人都可以告诉我 : n\t\t\t\t\n\t\t\t 在以下来自和 dwr 服务的响应中的含义和用途是什么. \r\n\t\t\t \r\n\t\t\t
c++ - "T a"、 "T a()"和 "T a=T()"之间有什么区别，其中 T 是一个类？
让 T 成为一个 C++ 类。下面三个指令在行为上有什么区别吗？ T a; T a(); T a = T(); T 为不带参数的构造函数提供了显式定义这一事实是否对问题有任何改变？后续问题:如果
Rust中的智能指针:BoxRcArcCellRefCellWeak
Rust中的智能指针是什么智能指针（smart pointers）是一类数据结构，是拥有数据所有权和额外功能的指针。是指针的进一步发展指针（pointer）是一个包含内存地
c++ - 交替排序数组的最简单方法是什么(例如 :T, T,F,F,F,T,F,T,F,F,F 到 T,F,T,F,T,F,T,F,T,T ,T)?
比如我有一个 vector vector > v={{true,1},{true,2},{false,3},{false,4},{false,5},{true,6},{false,7},{true,8
Python 3 Pandas - 带有额外\n\t\t\t\t\t 的列
我有一个来自 .xls 电子表格的数据框，我打印了 print(df.columns.values) 列，输出包含一个名为:Poll Responses\n\t\t\t\t\t。我查看了 Excel
java - 为什么Stream.reduce采用BinaryOperator 而不是BiFunction ？
This question already has answers here: What are good reasons for choosing invariance in an API like
rust - &T 和 T/&, ~T 和 T/~ 的区别
指针类型作为类型前缀与在类型前加斜杠作为后缀有什么区别。斜线到底是什么意思？最佳答案语法 T/~ 和 T/& 基本上已被弃用(我什至不确定编译器是否仍然接受它)。在向新向量方案过渡的初始阶段，[T
c++ - 如何从 T、T& 或 T* 模板参数中获取 T*
我正在尝试找到一种方法来获取模板参数的基类。考虑以下类: template class Foo { public: Foo(){}; ~Foo(){};
c++ - 当 T 声明为 T::T(T&) 时，std::is_trivially_constructible::value 的结果不正确
这是一个让我感到困惑的小问题。我不知道如何描述它，所以只看下面的代码: struct B { B() {} B(B&) { std::cout ::value #include
c++ - T::T(T&)有什么用？
为什么有 T::T(T&) 而 T::T(const T&) 更适合 copy ？ (大概是用来实现move语义的？？？) 原始描述(被melpomene证明是错误的): 在C++11中，支持了一种新
java - 类型参数 T 使用 Eclipse 在 T[] toArray(T[] a) 中隐藏类型 T
在 Java 7 中使用 eclipse 4.2 并尝试实现 List 接口(interface)的以下方法时，我收到了警告。 public T[] toArray(T[] a) { ret
foo[T](T,T) : T 的 Scala 类型扩展/推断
假设有三个函数: def foo[T](a:T, b:T): T = a def test1 = foo(1, "2") def test2 = foo(List(), ListBuffer()) 虽
generics - 通用类型统一 : multiple parameters (T, T) 与多个参数列表 (T)(T)？
我对柯里化(Currying)和非柯里化(Currying)泛型函数之间类型检查的差异有点困惑: scala> def x[T](a: T, b: T) = (a == b) x: [T](a: T,
c++ - 转发引用 : returning T when given T&& and T& when given T&
考虑一个类A，我如何编写一个具有与相同行为的模板 A& pretty(A& x) { /* make x pretty */ return x; } A pretty(A&& x) {
java - 为什么在 T 是类型参数而 t 是变量的情况下不允许使用 "t instanceof T"？
Eclipse 表示由于泛型类型橡皮擦，类型参数不允许使用 instanceof 操作。我同意在运行时不会保留任何类型信息。但是请考虑以下类的通用声明: class SomeClass{ T
c++ - T t {x} 和 T t = { x } 对于整数或枚举类型的区别？
在 C++14 中: 对于任何整数或枚举类型 T 以及对于任何表达式 expr: 有没有区别: struct S { T t { expr }; }; 和 struct S { T t = { exp

首页

博学

6Ren·AI

商城

html - css float error, element doesn't float adjacent to the div preceding