Question

我希望有这样的东西

see img

而不是我

get this result

我的HTML代码是这样的 `

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
    <form class="quote" action="javascript:void(0);"> 
      <span class="close">&times;</span>
      <article class="goright">

      <input type="name" name="Name" placeholder="" style="width: 140px"><br>

      <input type="lastname" name="lastname" placeholder="" style="width: 140px"><br>

      <input type="Place" name="Place" placeholder="" style="width: 140px"><br>

      </article>
      <aside id="sidebar">

      <textarea type="name" name="Name" placeholder="" style="height: 80px"></textarea> <br>

      </aside>
      </form>
      </div>
  </div>
</div>

这是我的CSS

    .modal {
        display: none; 
        position: relative; 
        z-index: 1;
        padding-top: 100px; 
        left: 0;
        top: -300px;
        float: right;
        width: 40%; 
        height: 40%; 
        overflow: auto; 
    }
        .modal-content {
        position: relative;
        background-color: #fefefe;
        margin:auto;
        padding: 0;
        border: 1px solid #888;
        width: 80%;
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4;
        overflow: hidden;
    }
    article#goright
    {   
        float: right;
    }
    aside#sidebar
    {
        float: left;
    }
    aside#sidebar .quote input, aside#sidebar .quote textarea
    {
        width: 90%;
        padding: 5px;
    }

所以我试着在这里找到这个东西，但我找不到适合我的答案，我尝试了很多变化，但没有什么真正起作用，我无法得到结果，我只是设法得到一方漂浮在右侧和旁边的酒吧，但在旁边是前一个酒吧。那么，你能给我一些提示或代码来帮助我达到预期的效果吗？

Answer 1

看看这个小提琴：https://jsfiddle.net/5xw7ssa4/

但是你的css中有一些错误：

高度不应为％。
两个容器必须向右浮动。
在最后一个浮动元素之后不要忘记clear:both。
article#goright必须为article.goright
在您的HTML中，您有type="name"例如。必须是type="text"。

Answer 2

您不需要使用<aside>和其他CSS调整来实现此结构。

只需将<textarea>移到<input>标记之上，然后分别为其添加float:left类和float:right类。

表单的宽度继承自.modal类。

此外，使用的<input>代码type属性无效。支持type属性如：https://www.w3schools.com/tags/att_input_type.asp

中所述

默认情况下，<textarea>也没有type属性。

＆＃13;

.modal {
  width: 40%;
  height: 40%;
  overflow: auto;
}

.align-right {
  float: right;
}

.align-left {
  float: left;
}

.modal-content {
  background-color: #fefefe;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4;
}

input {
  margin-bottom: 5px;
}

＆＃13;

<div id="myModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <form class="quote" action="javascript:void(0);">
        <textarea name="Name" placeholder="Textarea" style="height: 80px" class="align-left"></textarea>
        <input type="text" name="Name" placeholder="Input A" style="width: 140px" class="align-right" />
        <input type="text" name="lastname" placeholder="Input B" style="width: 140px" class="align-right" />
        <input type="text" name="Place" placeholder="Input C" style="width: 140px" class="align-right" />
      </form>
    </div>
  </div>
</div>

＆＃13;

Answer 3

以下是您尝试实现目标的一个示例 -

＆＃13;

.wrapper {
  max-width: 500px;
}

.textarea-wrapper,
.input-wrapper {
  float: left;
  width: calc(50% - 10px);
}

.textarea-wrapper {
  margin-right: 20px;
}

.textarea {
  width: 100%;
  height: 90px;
}

.input {
  margin-bottom: 16px;
}

＆＃13;

<div class="wrapper">
  <div class="textarea-wrapper">
<textarea class="textarea"></textarea>
  </div>
  
  <div class="input-wrapper">
    <input type="text" class="input" placeholder="Text 1">
     <input type="text" class="input" placeholder="Text 2">
     <input type="text" class="input" placeholder="Text 2">
  
  </div>
</div>

＆＃13;

这是一个链接。 https://codepen.io/aphextwix/pen/MmZxjR

Answer 4

您好，我应该检查您的html标记和CSS以及以下是我的建议

CSS

.modal {
    position: relative;
    z-index: 1;
    padding-top: inherit;
    width: 50%;
    height: 123px;
    margin: 0 auto;
    margin-top: 20px;
}
        .modal-content {
        position: relative;
        background-color: #fefefe;
        margin:auto;
        padding: 0;
        border: 1px solid #888;
        width: 80%;
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4;

    }
form {
    width: 100%;
    padding: 10px 0px;
}
.close{
    position: absolute;
    right: 0;
    color: #fff;
    background: #000;
    padding: 5px;
    z-index: 3;
}
/*a classis identified by a "." an id is identified by an "#" so article#goright is wrong you should have wrote article.goright*/
    article.goright {
    float: left;
    width: 50%;
}
   aside#sidebar {
    float: left;
    width: 50%;
}
/* .quote is the form class  aside is inside the form so instead of aside#sidebar .quote textarea you should write  .quote aside#sidebar textarea */ 
    .quote aside#sidebar  input, .quote aside#sidebar textarea
    {
        width: 90%;
        padding: 5px;
    }

    article.goright input {
    width: 80%;
    margin-bottom: 5px;
    height: 20px;
}
/*very important to solve the issue*/
.clear{
width: 100%;
height: 0;
clear: both;
float: none;
}

HTML

   <!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
<title>Testing Page</title>
</head>

<body style="width:100%; margin: 0 auto; padding: 0; text-align: center;">
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
    <form class="quote" action="javascript:void(0);"> 
      <span class="close">&times;</span>

      <aside id="sidebar">

      <textarea type="name" name="Name" placeholder="" style="height: 80px"></textarea> <br>

      </aside>
      <article class="goright">

      <input type="name" name="Name" placeholder=""><br>

      <input type="lastname" name="lastname" placeholder=""><br>

      <input type="Place" name="Place" placeholder=""><br>

      </article>
       <!-- this is the div you need to have myModal div cover the div inside it since they are floating left -->
      <div class="clear"></div>
      </form>
      </div>
  </div>
</div>
</body>
</html>

将文本框放在两边

4 个答案: