Question

所以我只是教自己HTML＆amp; CSS和我正在尝试创建自己的网站。现在我有两个不同的<div> s具有相同的高度，并排（一个在左边，另一个在右边）。我想在第一个<div>中写一些内容，然后在第二个<div>中继续其余内容。更具体地说，我想在第一个<div>中写一个项目的描述，在第二个<div>中写下该项目的价格。

我无法将它们保持在同一条线上，彼此相对。因此，如果描述向下或向上移动，价格随之移动。

非常感谢您与我共度时光！

Answer 1

<div class='item_container'>
  <div class='experience'>I did lots of shit</div>
  <div class='projects'>Here's some of it</div>
</div>

然后，您可以根据需要定位item_container div并设置内部div的样式。

不过，桌子可以成为现实。当我们听到桌子时，HTML表格不仅仅是我们想到的 - 它不仅仅是excel。

<table>
<tr> 
  <th>Item</th>
  <th>Price</th> 
</tr>
<tr>
  <td>Cheese</td>
  <td>$2</td> 
</tr>
</table>

注意：不需要th（table-head）。刚好。取决于您的用例。

Answer 2

HTML

<div class="container">
    <span class="left">
        item
    </span>
    <span class="right">
        des
    </span>
</div>

CSS

.container
{
    width:100%;
    min-height:20px;
    background-color:gray;
}

.left
{
    width:48%;
    padding:1%;
    background-color:red;
    float:left;
}

.right
{
    width:48%;
    padding:1%;
    background-color:aqua;
    display:inline-block;
}

HERE IS THE FIDDLE DEMO

Answer 3

我知道，有多种方法可以解决这个问题。

first one is you can use `display:table` to align the div content

second one is you can `float` property and parent div must use `overflow:hidden`

third option is you can use `vertical align:top` if both div have same height and width.

Answer 4

也许给他们相同的班级或身份。

<div class="sameinboth"></div>
<!-- Or... -->
<div id="sameinboth"></div>

然后你的css有一个类或id选择器：

.class {

}
#div {

}

如何在两个不同的<div>之间分隔一个句子，这样句子的两个部分总是在同一行？</div>

4 个答案: