Question

我如何并排制作3个div。其中div1为极左，div3为极右，div2为中间。

我知道这可以通过显示来完成：flex和justify-content：space-between，但我正在寻找一种没有flex的方法。

这是我的方法，但无法成功实现。

我试图让所有div的显示：inline-block和float：left和float：右边两个极端div和中间一个我试过margin：auto，但看起来它不尊重它

请帮忙

.container {
  border: 1px solid;
}
.container div {
  height: 50px;
  width: 50px;
  background: red;
  display: inline-block;
}
#div1 {
  float: left;
}
#div3 {
  float: right;
}
#div2 {
  margin: auto;
}

<div class="container">

  <div id="div1"></div>
  <div id="div2">he</div>

  <div id="div3"></div>
</div>

Answer 1

试试这个。 unsigned long

position: absolute;

.container {
  border: 1px solid;
  position: relative;
  overflow: hidden;
  
}
.container div {
  height: 50px;
  width: 50px;
  background: red;
  display: inline-block;
  
}
#div1 {
 float: left;
}
#div3 {
 float: right;
}
#div2 {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

Answer 2

这就是你的代码

    .container {
      border: 1px solid;
    }
    .container div {
      height: 50px;
      width: 50px;
      background: red;
      display: inline-block;
    }
    #div1 {
      float: left;
    background-color:red;
    }
    #div3 {
      float: left;
      background-color:green;
    }
    #div2 {
      float: left;
      background-color:yellow;
    }

和

<div class="container">
  <div id="div1">div 1</div>
  <div id="div2">div 2</div>
  <div id="div3">div 3</div>
</div>

Answer 3

＆＃13;

.container {
  border: 1px solid;
  position: relative;
}
.container div {
  height: 50px;
  width: 50px;
  background: red;
  display: block;
}
#div1 {
  float: left;
}
#div3 {
  position: absolute;
  right: 0;
  top: 0;
}
#div2 {
  margin: auto;
}

＆＃13;

<div class="container">

  <div id="div1"></div>
  <div id="div2">he</div>

  <div id="div3"></div>
</div>

＆＃13;

Answer 4

请检查下面的CSS，看看这是否是你想要的：

＆＃13;

.container {
  float: left;
  width: 300px;
  border: 1px solid;
}
#div1 {
  float: left;
  width: 100px;
  background-color: red;
}
#div2 {
  float: left;
  width: 100px;
  background-color: green;
}
#div3 {
  float: left;
  width: 100px;
  background-color: blue;
}

＆＃13;

<div class="container">
  <div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper eleifend volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</div>
  <div id="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div id="div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper eleifend volutpat.</div>
</div>

＆＃13;

Answer 5

不要同时使用CreatePlatformEndpointRequest cpeReq = new CreatePlatformEndpointRequest(); cpeReq.setCustomUserData(""); cpeReq.setToken(this.mToken); cpeReq.setPlatformApplicationArn(retrieveEndpointArn()); client.setRegion(Region.getRegion(Regions.DEFAULT_REGION)); CreatePlatformEndpointResult cpeRes = client .createPlatformEndpoint(cpeReq); endpointArn = cpeRes.getEndpointArn(); } catch (InvalidParameterException ipe) { String message = ipe.getErrorMessage(); System.out.println("Exception message: " + message); Pattern p = Pattern .compile(".*Endpoint (arn:aws:sns[^ ]+) already exists " + "with the same Token.*"); Matcher m = p.matcher(message); if (m.matches()) { // the endpoint already exists for this token, but with // additional custom data that // CreateEndpoint doesn't want to overwrite. Just use the // existing endpoint. endpointArn = m.group(1); } else { // rethrow exception, the input is actually bad throw ipe; } }和float。这将有效：

inline-block

如果您想单独设置div的样式，请单独定位

如何并排制作3个div

5 个答案: