如何在标识旁边放置textarea？

Question

以下是我的代码的次要example。正如您所看到的，textarea距离徽标太远。我希望它在徽标旁边（在桌面上时）和徽标下方（在移动设备上时）。

textarea的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;
}

Answer 1

我创建了另一个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>

并添加以下css：

.ui-block-solo {
    float:left;
}

.ui-block-solo2 {
    float:right;
}

这是小提琴：http://jsfiddle.net/6me33s8y/2/

更新我自己的回答：

实际上，您只需将float：left添加到徽标即可，无需更改html代码即可使用

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

Answer 2

您可以使用 CSS Flexbox 轻松完成您所寻求的布局。

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

.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; }
}

在较大的屏幕上：

在较小的屏幕上：

DEMO：http://jsfiddle.net/6me33s8y/7/

无法更改HTML。没有对JS / jQuery的更改。纯CSS解决方案。

注意：所有主流浏览器都支持Flexbox except IE 8 & 9。

Answer 3

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

示例:(桌面）

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

示例:(移动）

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

希望有所帮助！