Jquery 如何将文本区域放置在徽标旁边？

这是我的代码的一小部分。正如您所看到的，文本区域距离徽标太远。我想它是旁边的标志（当在桌面上）和下面的标志（当在手机上）

文本区域的CSS：

textarea{  
  display:block !important;
  box-sizing: padding-box !important;
  overflow:hidden !important;    
  padding:10px !important;
  width:250px !important;
  font-size:14px !important;
  border-radius:8px !important;
  border:6px solid #556677 !important;
}

---

我创建了另一个div来包含textarea

<div class="ui-block-solo">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png" id="logo">
</div>
<div class="ui-block-solo2">
    <textarea id="cagetextbox" placeholder='Talk to the Cage world!'>  </textarea>
</div>

这是小提琴：

---

更新我自己的答案：

实际上，您只需将float:left添加到徽标中，就可以在不更改html代码的情况下工作

#logo {
    width: 200px;
    height: 169px;
    float: left;
}

---

使用可以轻松完成您正在寻找的布局类型

以下是您需要的所有代码：

.ui-block-solo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 185px;
}

#logo {
    width: 200px;
    height: 169px;
    position: absolute;
    left: 2%;
}

@media (max-width: 500px) {
    .ui-block-solo { flex-direction: column; }
    #logo { position: static; }
}

在大屏幕上：

在较小的屏幕上：

演示：

对HTML没有任何更改。对JS/jQuery没有任何更改。一个纯CSS解决方案

---

注意：所有主要浏览器都支持Flexbox。

在徽标的CSS中添加以下行：

示例：（桌面）

示例：（移动）

---

希望有帮助

@mark.hch小提琴出了问题，现在可以了吗？你愿意使用flexbox来获得完整的解决方案吗？我不知道那是什么@Michael_B。如果它有效（即扩展有效且漂亮），那么当然！Flexbox是用于布局的CSS3模块。非常高效和最少的代码。除IE 8和9外，所有主要浏览器都支持。如果您不需要支持IE8和IE9，那么它可以工作。好的，那么@Michael_B您可以在我的示例中看到textarea现在是如何工作的。如果你达到同样的功能，我会接受你的答案！Michael您应该将用户名更新为Michael_G，因为这很好。然而，我在聊天中不够清楚。我希望文本框放在中间，而不是徽标。所以我希望徽标位于左侧，而文本框位于中间。可能吗？谢谢你的夸奖。你在评论中所说的正是我所做的。文本框位于中央（在较大屏幕上），徽标位于左侧（在较大屏幕上）。该死，你说的都是真的，而在我的项目中，却不是。想弄明白！不，迈克，小提琴里发生的事正是我想要的。是的，我对阿普塔纳工作室一无所知。我知道我的答案中的代码在Chrome、FF、Safari和IE>10中有效，但我不能告诉你Aptana对flexbox的支持。好的，Mike，我已经成功了。最后一次调整，您的答案将是理想的。检查文本框中没有文本时会发生什么，这将是默认设置。徽标从标题的边框中消失！你能在不改变标志高度的情况下改变它吗？很好的尝试，哈利，很好！然而，Michael首先提出了他的解决方案（在评论中，因此我将接受他）。谢谢@这不是一个问题，当我写我的答案时，这个问题没有答案。很高兴你解决了你的问题

.ui-block-solo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 185px;
}

#logo {
    width: 200px;
    height: 169px;
    position: absolute;
    left: 2%;
}

@media (max-width: 500px) {
    .ui-block-solo { flex-direction: column; }
    #logo { position: static; }
}

#logo {
        .....
        vertical-align: middle; 
        .... 
      }

@media (max-width:your width)
     {
     #logo { 
        width: your max width! or 100%;
        margin-left:auto;
        margin-right:auto;
        ....
       }
     }