Question

如何让3个孩子div与.box班的width具有相同的container，同时保持整个父div inline #container { width: 20em; background: red; text-align: center; } .box { display: inline-block; margin: 1em; border: 1px solid #000; } <div id="container"> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> </div> #!/bin/bash IFS=$'\n' export $IFS for i in $(ls -la); do echo $i; done 1}}。

这是fiddle

declare -x DBUS_SESSION_BUS_ADDRESS="unix:abstract=/tmp/dbus-xwjTMGqSe7,guid=b8543bd3ba7dbc5ca284b0ce5741ccff"
declare -x DESKTOP_SESSION="default"
declare -x DISPLAY=":0"
declare -x GDMSESSION="default"
declare -x GDM_LANG="en_US.utf8"
declare -x GIO_LAUNCHED_DESKTOP_FILE="/usr/share/applications/atom.desktop"
declare -x GIO_LAUNCHED_DESKTOP_FILE_PID="19896"
declare -x GJS_DEBUG_OUTPUT="stderr"
declare -x GJS_DEBUG_TOPICS="JS ERROR;JS LOG"
declare -x GNOME_DESKTOP_SESSION_ID="this-is-deprecated"
declare -x GPG_AGENT_INFO="/run/user/1000/keyring/gpg:0:1"
declare -x LANG="en_US.utf8"
declare -x NODE_ENV="production"
declare -x NODE_PATH="/usr/share/atom/resources/app.asar/exports"
declare -x OLDPWD
declare -x PATH="/usr/local/bin:/usr/bin:/bin:/usr/local/games:/usr/games"
declare -x SHELL="/bin/bash"
declare -x SHLVL="1"
declare -x SSH_AGENT_PID="2218"
declare -x SSH_AUTH_SOCK="/run/user/1000/keyring/ssh"
declare -x WINDOWPATH="7"
declare -x XDG_CURRENT_DESKTOP="GNOME"
declare -x XDG_DATA_DIRS="/usr/share/gnome:/usr/local/share/:/usr/share/"
declare -x XDG_MENU_PREFIX="gnome-"
declare -x XDG_RUNTIME_DIR="/run/user/1000"
declare -x XDG_SEAT="seat0"
declare -x XDG_SESSION_DESKTOP="default"
declare -x XDG_SESSION_ID="1"
declare -x XDG_VTNR="7"

            public void run() {

                // code for 10 minutes

            }

        }, 600000);

Answer 1

为

使用 CSS flexbox

＆＃13;

#container {
  width: 20em;
  display: flex;
  background: red;
  text-align: center;
}
.box {
  flex: 1;
  border: 1px solid #000;
}

＆＃13;

<div id="container">
  <div class="box">test</div>
  <div class="box">test</div>
  <div class="box">test</div>
</div>

＆＃13;

或

使用正在使用的inline-block，并进行一些调整。

＆＃13;
＆＃13;
* { box-sizing: border-box } #container { width: 20em; background: red; text-align:center } .box { font-size: 16px; display: inline-block; width: calc(100% / 3); border: 1px solid #000; }
＆＃13;
<div id="container"> <div class="box">test</div><div class="box">test</div><div class="box">test</div> </div>
＆＃13;
＆＃13;
＆＃13;

或

使用 CSS表格来支持旧浏览器

＆＃13;
＆＃13;
#container { width: 20em; display: table; background: red; text-align: center; } .box { display:table-cell; border: 1px solid #000; }
＆＃13;
<div id="container"> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

显示：表格版本：

＆＃13;

#container {
  width: 20em;
  background: red;
  text-align: center;
  display: table;
  table-layout: fixed;
  border-spacing: 1em;
  /* instead the margin:1em; you applied to children */
}
.box {
  display: table-cell;
  ;
  border: 1px solid #000;
}
.middle{vertical-align:middle;}

＆＃13;

<div id="container">

  <div class="box">test</div>
  <div class="box">test</div>
  <div class="box">test</div>

</div>
<hr/>
<div id="container">

  <div class="box">test
    <br/>+ 1line ?</div>
  <div class="box">test</div>
  <div class="box middle">test</div>

</div>

＆＃13;

table-layout:fixed将修复您为主容器和子容器设置的宽度值。

如果儿童（桌心）没有设置宽度，他们会均匀喷洒

＆＃13;

#container {
  width: 20em;
  background: red;
  text-align: center;
  display: table;
  table-layout: fixed;
  border-spacing: 1em;
  /* instead the margin:1em; you applied to children */
}
.box {
  display: table-cell;
  ;
  border: 1px solid #000;
}
.middle{vertical-align:middle;}

＆＃13;

<div id="container">

  <div class="box">test test test test </div>
  <div class="box">test</div>
  <div class="box">test</div>

</div>
<hr/>
<div id="container"class=" bis ">

  <div class="box">testtesttesttest testtesttest</div>
  <div class="box">test</div>
  <div class="box">test</div>

</div>

＆＃13;

Answer 3

如果您想使用display: inline-block执行此操作，则可以在每个33.33%上设置.box的相等宽度，从HTML中移除空格并添加box-sizing: border-box }。

* {
  box-sizing: border-box;
}
#container {
  width: 20em;
  background: red;
  text-align: center;
}
.box {
  display: inline-block;
  width: 33.33%;
  border: 1px solid #000;
}

<div id="container">
  <div class="box">test</div><div class="box">test</div><div class="box">test</div>
</div>

使父div中的子div等于宽度和流量

3 个答案: