如何将两个div元素并排放在另一个div元素中?

时间:2016-05-15 09:03:54

标签: html css

我希望div#alpha1div#alpha2并排放置div#alpha

CODE

#alpha {
  position: relative;
  padding-top: 4px;
  margin-top: 8px;
  margin-left: 2%;
  margin-right: 2%;
  width: 96%;
  height: 100px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
}
#alpha1 {
  position: relative;
  width: 94px;
  height: 94px;
  border: 1px solid black;
  margin-left: 2%;
}
#alpha2 {
  position: relative;
  margin-top: 0px;
  height: 40px;
  border-top: 1px;
  border-bottom: 1px solid black;
  margin-left: 94px;
}
<DIV id="alpha">
  <DIV id="alpha1">
    <IMG src="img/jenny.jpg" width="94px" height="94px">
  </DIV>
  <DIV id="alpha2">
    <H1 id="patientname">Jenny Thomas</H1>
  </DIV>
</DIV>

3 个答案:

答案 0 :(得分:3)

您可以使用typedef struct State{ int m; int eval; }State; State negaMax2(int state, int turn, State *best){ int move; /*terminal state?*/ if(state == 1){ printf("Terminal state\n"); best->eval = turn; return *best; } best->m = -INFINITY; for(move = 1; move <= 3; move++) { if (state - move > 0) { /* legal move */ int value = -1 * (negaMax2(state-move, turn, best)).m; if (value > best->move){ best->eval = turn; best->m = value; } } } return *best; } void playNim(int state) { int turn = 0; State *best; best->eval = turn; while (state != 1) { int action = (negaMax2(state, turn, best)).m; printf("%d: %s takes %d\n", state, (turn==MAX ? "Max" : "Min"), action); state = state - action; turn = 1 - turn; } printf("1: %s looses\n", (turn==MAX ? "Max" : "Min")); } 在父级中使用flexbox,然后在display:flex中使用flex:1,以使其根据屏幕大小增长

请勿使用HTML #alpha2 / width标记,而是使用CSS进行样式设置。

注意我对您的代码进行了一些调整。

height
#alpha {
  padding-top: 4px;
  margin: 8px 2% 0;
  width: 96%;
  height: 100px;
  border: solid black;
  border-width: 1px 0;
  display: flex
}
#alpha1 {
  width: 94px;
  height: 94px;
  border: 1px solid black;
  margin: 0 2%;
}
#alpha2 {
  flex: 1
}
#alpha2 h1 {
  border-bottom: 1px solid black;
  height: 40px
}

答案 1 :(得分:1)

最简单/最快速的解决方案是将display: flex分配给容器#alpha

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

(我还删除了一些不必要的设置)

答案 2 :(得分:-1)

您只需要设置div的float属性即可。你在这里: -

&#13;
&#13;
#alpha{
    position:relative;
    padding-top:4px;
    margin-top:8px;
    margin-left:2%;
    margin-right:2%;
    width:96%;
    height:100px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    float: none;
    }

#alpha1{
    position:relative;
    width:94px;
    height:94px;
    border:1px solid black;
    margin-left:2%;
    margin-right: 0px;
    float: left;
}
#alpha2{
    position:relative;
    margin-top:0px;
    height:40px;
    border-top:1px;
    border-bottom:1px solid black;
    margin-left:9%;
    float: next;
}
&#13;
<DIV id="alpha">
    <DIV id="alpha1">
        <IMG src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTvU-f_zys67Kv6hdqJcmSN5n_dfe2igiq9lLZYpcXAyVXEBNQ6" width="94" height="94" alt="IMAGE">
    </DIV>
    <DIV id="alpha2">
        <H1 id="patientname">Jenny Thomas</H1>
    </DIV>
    </DIV>
&#13;
&#13;
&#13;

我在alpha2中编辑了您的保证金,以便正确显示底线。它在浏览器中显示正确。这不是。你可以查看它here。如果有问题,请将问题标记解决。