Question

我正在尝试的是逐行显示消息，最后显示一个文本框用于输入发送消息，现在我遇到的问题是我可以逐行显示消息，但文本框将显示水平显示消息附近。文本框无法显示在页面的底行。这是意外的结果图像。我尝试了很多方法，但似乎无法解决它。

编辑：我需要在左侧显示传入消息，在右侧显示传出消息

<div class="container">
  <div class="row">
    <div class="row" style="width:100%">
      <table>
        <tr>
          <td bgcolor="#CCFFEE">
            test() blah,blah,blah 2016-08-12 04:44:20
          </td>
          <td>
            <img src="" alt="Smiley face" height="80" width="80">
          </td>
          <td></td>
          <td></td>
          <tr>
            <tr>
              <td bgcolor="#CCFFEE">
                test() Hi 2016-08-12 04:43:16
              </td>
              <td>
                <img src="" alt="Smiley face" height="80" width="80">
              </td>
              <td></td>
              <td></td>
              <tr>
      </table>
      <br/>
      <br/>
      <table>
        <form action="/v1/reply" method="post" onsubmit="return validateForm();window.location.reload();" name="myForm">
          <tr>
            <td>
              <input type="text" id="body" name="body" style="width:700px;height:50px;">
            </td>
            <td>
              <button type="submit" style="width:100px;height:50px;" id="sent_1" value="Send">Submit</button>
            </td>
          </tr>
          <br>
        </form>
      </table>
    </div>

Answer 1

如果您希望display: inline-table比另一个float:right;宽，请使用float:left然后<td>和<td>，使用colspan。所有和更多属性和属性都在下面的代码段中使用：

段

.msg {
  display: inline-table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 50%;
}
.left {
  float: left;
  text-align: left;
}
.right {
  float: right;
  text-align: right;
}
.input {
  width: 100%;
}
img {
   display: block;
   padding:0 80% 0 0;
   margin: 0 auto 0 0;
}

<div class="container">
  <div class="row">
    <div class="row" style="width:100%">
      <form action="http://www.hashemian.com/tools/form-post-tester.php" method="post" name="myForm">
        <table class='left msg'>
          <tr>
            <td colspan='2' bgcolor="#CCFFEE">
              test() blah,blah,blah 2016-08-12 04:44:20
            </td>
            <td>
              <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
            </td>

            <tr>
              <tr>
                <td colspan='2' bgcolor="#CCFFEE">
                  test() Hi 2016-08-12 04:43:16
                </td>
                <td>
                  <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
                </td>

                <tr>
        </table>
        <table class='right msg'>
          <tr>
            <td colspan='2' bgcolor="#CCFFEE">
              test() blah,blah,blah 2016-08-12 04:44:20
            </td>
            <td>
              <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
            </td>

            <tr>
              <tr>
                <td colspan='2' bgcolor="#CCFFEE">
                  test() Hi 2016-08-12 04:43:16
                </td>
                <td>
                  <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
                </td>

                <tr>
        </table>
        <table class='input msg'>

          <tr>
            <td colspan='5'>
              <input type="text" id="body" name="body" style="width:100%;height:50px;">
            </td>
            <td>

              <input type='submit' style="width:100px;height:50px;" id="sent_1" value="Submit">
            </td>
          </tr> 


        </table>

      </form>
    </div>
  </div>
</div>

Answer 2

如果你在这里使用Twitter Bootstrap，

插入<div class="clearfix"></div>

之前

<table>
    <form action="/v1/reply" method="post" onsubmit="return validateForm();window.location.reload();" name="myForm">

            <tr><td><input type="text" id="body" name="body" style="width:700px;height:50px;"></td>
                <td><button type="submit" style="width:100px;height:50px;" id="sent_1" value="Send">Submit</button></td>
            </tr><br>
    </form>
</table>

Answer 3

的CSS：

table,
tr{
    width:100%;
}

Answer 4

如果table不是强制性的，那么您可以使用flex-box

执行以下代码段后，您可以了解使用flexbox的优势。它更具可定制性，在我的html代码中，图像的位置在消息之前。但是在发送消息的输出中，图像将在消息之后显示。

＆＃13;

.row{
  display: flex;
  align-items: center;
}
img{
  width: 35px;
}
.reciever{
  justify-content: flex-start;
}
.sender{
  justify-content: flex-end;
}
.sent, .recieve{
  align-items: center;
  display: flex;
  max-width: 50%;
}
.sent{
  flex-direction: row-reverse;
}
form{
  padding: 1em;
  text-align: center;
}
input{
  width: 85%;
  height: 20px;
}
button{
  height: 25px;
}

＆＃13;

<div class="container">
<div class="row sender">
	<div class="sent">
		<img src="http://www.carderator.com/assets/avatar_placeholder_small.png" alt="">
		<span>sent message 1</span>
	</div>
</div>
<div class="row reciever">
	<div class="recieve">
		<img src="http://www.quantumphotonics.uottawa.ca/wp-content/uploads/2014/09/portrait_placeholder.png" alt="">
		<span>recieved message 1</span>
	</div>
</div>
<div class="row sender">
	<div class="sent">
		<img src="http://www.carderator.com/assets/avatar_placeholder_small.png" alt="">
		<span>sent message 2</span>
	</div>
</div>
<div class="row reciever">
	<div class="recieve">
		<img src="http://www.quantumphotonics.uottawa.ca/wp-content/uploads/2014/09/portrait_placeholder.png" alt="">
		<span>recieved message 2</span>
	</div>
</div><div class="row sender">
	<div class="sent">
		<img src="http://www.carderator.com/assets/avatar_placeholder_small.png" alt="">
		<span>sent message 3</span>
	</div>
</div>
<div class="row reciever">
	<div class="recieve">
		<img src="http://www.quantumphotonics.uottawa.ca/wp-content/uploads/2014/09/portrait_placeholder.png" alt="">
		<span>recieved message 3</span>
	</div>
</div>
<form action="">
	<input type="text" >
	<button>Submit</button>
</form>
</div>

＆＃13;

以下是工作 Demo

html无法逐行对齐表

4 个答案:

段