代码之家 › 专栏 › 技术社区 › kennyzx

使左对齐div占据所有空间

position css html

kennyzx · 技术社区 · 8 年前

我想做一个运行命令的向导 Windows command prompt .

.bold-cli {
        float: left;
        padding: 20px;
        margin: 20px 30px;
        font-family: Arial;
        font-style: italic;
        font-weight: bold;
        background-color: black;
        color: white;
}

<div class="bold-cli">
    C:\> Rundll32 %windir%\system32\dfshim.dll CleanOnlineAppCache 
</div>

我想要 div 只占用足够的空间来显示命令,而不是水平拉伸,所以我添加 float: left .

问题是,这个div之后的内容不是以新行开始的,而是显示在右侧。

2 回复 | 直到 8 年前

Nandita Sharma 8 年前

增加一个 clearfix div,如下所示移除影响下一个元素的浮点。

 
.bold-cli {
    float: left;
    padding: 20px;
    margin: 20px 30px;
    font-family: Arial;
    font-style: italic;
    font-weight: bold;
    background-color: black;
    color: white;
}

.clearfix::after {
content: "";
clear: both;
display: table;
}

<div class="bold-cli">
 ABC ABC  ABC ABC  ABC ABC  ABC ABC  ABC ABC  AB ABC  ABC ABC  ABC 
</div>
<div class="clearfix">
</div>

Start from new line

Sinto 8 年前

.bold-cli {
  float: left;
  padding: 20px;
  margin: 20px 30px;
  font-family: Arial;
  font-style: italic;
  font-weight: bold;
  background-color: black;
  color: white;
}

<p>To fix this, start a command prompt, type the following command and then press Enter.</p>
<div class="bold-cli">
  C:\> Rundll32 %windir%\system32\dfshim.dll CleanOnlineAppCache
</div>
<span style="float:left;clear: both;">We have build a utility to run this command for you. <a href="https://stackoverflow.com/" style="color: #DB5523;">Click me</a></span>