Question

我有一个容器，其中有一些内容，但我想在左边放一些东西，我无法弄清楚如何做到这一点。

使用absolute定位是唯一的方法吗？以下是我一直在播放的代码，以展示广告为例：

HTML：

<div class="container">
  <p class="one">Left</p>
  <p style="clear: both;"></p>
  <div class="center">Center</div>
</div>

CSS：

.container {
  background-color: gray;
  text-align: center;
}

.container .one {
  float: left;
  background-color: aqua;
}

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

.container .center {
  display: inline-block;
  background-color: green;
}

CodePen：

http://codepen.io/anon/pen/NqeBNp

Answer 1

尝试将display:inline-block和float:left应用于div的一些width。

＆＃13;

.container {
  background-color: gray;
  text-align: center;
  overflow: auto;
}
.container .one {
  display: inline-block;
  float: left;
  width: 33%;
  background-color: aqua;
}
.container .center {
  display: inline-block;
  float: left;
  width: 33%;
  background-color: green;
}

＆＃13;

<div class="container">
  <div class="one">Left</div>
  <div class="center">Center</div>
</div>

＆＃13;

Answer 2

您应该使用Flexbox，它非常易于使用。如果这是你想要的，请告诉我？

截图：

代码的实时实例 - ＆gt; https://jsfiddle.net/7fo5ceb6/

// HTML

<?php
function create_lience_file($license_key) {        
    pass_encrypt($license_key);
    $lkeycontent = get_option('mlm_license_settings');
    $surlcontent = $license_key = pass_encrypt(site_url());
    $r = file_put_contents(dirname(__FILE__) . '/mlmLience.txt', $lkeycontent . '|' . $surlcontent);
    if ($r) {
        return true;
    }
    return false;
}

$settings = create_lience_file($license_key);
?>

// CSS

<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">    
</head>
<body>
<div id="container">
    <div>left</div>
    <div>center</div>
    <div>right</div>
</div>
</body>
</html>

居中并漂浮在同一容器内

2 个答案: