Question

我正在建立一个网站，但我遇到了问题。

我有一个用BG颜色创建内容的div！

问题是，文字显示在底部，但我希望它们彼此相邻！

以下是一个示例屏幕截图的链接：

http://www.mupload.nl/img/9x7jco1v45f.png

我在CSS中尝试了一些代码，但没有任何效果。

这就是我现在所拥有的：

CSS：

#rechts {
    float: right;
    margin-right: 10px;
}

#lings {
    float: left;
    margin-left: 10px;
}

.inhoud {
    padding-bottom:100px; /* Height of the footer element */
    padding-top:150px;
    background-color: #f5f5f5;
    z-index: 999;
    margin-left: 10%;
    margin-right: 10%;
}

HTML：

<div class="inhoud">
    <p class="contactInhoudLings">

    // Here is the personal info.
    <p class="contactInhoudRechts">

    // here is the PHP Contact form.
    </p>
</div><!-- #inhoud -->

Answer 1

利用下面的display:inline-block;

.container {
    background-color: lightgray;
}
.section {
    display: inline-block;
    vertical-align: top;
    width: 49%;
}

<div class="container">
    <div class="section">
        Some random inforamtion here<br/>
        more contact information
    </div>
    <div class="section right">
        Name<br/>
        <input type="text" /><br/>
        Email<br/>
        <input type="text" /><br/>
        Phone<br/>
        <input type="text" /><br/>
    </div>
</div>

Answer 2

您可以使用flex将容器拆分为两个或任何其他数字。

.container {
    display: flex;
}
.col {
    flex-basis: 0;
    flex-grow: 1;
}

<div class="container">
    <div class="col">
        text
    </div>
    <div class="col">
        your form
 
        <form>
            <label for=name>Name:<label/>
            <input type=text name=name placeholder=name />
            <input type=submit />
        </form>
    </div>
</div>

Answer 3

如果您想要margin-left和margin-right，请尝试以下操作：

<强> HTML

<div class="inhoud">
  <p class="contactInhoudLings">
   // Here is the personal info.
  <p class="contactInhoudRechts">
   // Here is the PHP Contact form.
  </p>
</div><!-- #inhoud -->

<强> CSS

.inhoud{
  width: 100%;
}
.contactInhoudLings{
  background-color: red;
  float: right;
  margin-right: 1%;
  width:49%;
}
.contactInhoudRechts{
  background-color: green;
  float: left;
  margin-left: 1%;
  width:49%;
}

另请参阅jsfiddle示例

我希望在一个div中的一个页面上有两个盒子

3 个答案: