小编Sti*_*ers的帖子

目前,该站点具有以下css类,旨在用于表单中的注释(较长文本)条目.

.scrollabletextbox {
    height:100px;
    width:200px;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 82%;
    overflow:scroll;
}

框和其他样式的大小正确注册,但文本从垂直居中开始,从不换行.完全查看文本的唯一方法是向左/向右移动光标.

表单使用以下html(带有一点点php)来实现大文本框

<input type="text" class="scrollabletextbox" name="note" value="<?php echo $note; ?>">

预先感谢您的任何帮助.

我甚至不确定这是否可行,我试图找出是否可以缩小文本包装的跨度周围的flex项目.

这就是我现在所处的位置,如果你看第二行,我试图消除文本右侧的空格.

body {
  height: 75%;
  margin: 0;
  padding: 0;
}
body > div {
  min-height: 55px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  border-bottom: 1px solid black;
  width: 225px;
}
body > div > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  border-right: 1px solid black;
}
body > div > div span {
  font-size: 21px;
}
body > div …

我正在尝试创建一个包含三个div的页面:页眉,页脚和内容区域.这些应该占据屏幕的100%.

页眉和页脚很小,不会改变,内容区域可以是任何大小,所以我添加overflow:auto了它使它在太大时滚动.

问题是,它溢出了屏幕的高度.我创建了一个小提琴来演示:https: //jsfiddle.net/tdxn1e7p/

我正在使用以下CSS来设置html和body高度,因此容器上的height:100% 技巧将起作用:

html, 
body {
    height: 100%;
}

我的文件结构是:

<div style="height:100%;">
  <div>
    Header content
  </div>
  <div style="overflow:auto;">
    Body content... this could be very long
  </div>
  <div>
    Footer content
  </div>
</div>

我已经在这类问题上找到了很多变化,比如这个问题,但是还没有能够让任何答案对我有用.

我想要.test_info宽度自动,与宽度不一样#test.

https://jsfiddle.net/ef6ukobf/

#test {
  background: #26A65B;
  height: 30px;
  width: auto;
  margin-top: -8px;
  margin-left: -8px;
  margin-right: -8px;
}
.test_info {
  background: #00ff00;
  border-radius: 5px;
  height: 20px;
  width: auto;
  margin-top: -2px;
  margin-left: 20px;
}

<div id="test">
  <div class="test_info">50</div>
</div>

我见过很多网站都有黑白图像,过渡到带:hover选择器的彩色版本.我想要做的是相同但没有用户交互.例如,图像将在10秒后开始黑白并淡入其彩色版本.

这可能与CSS有关吗？

我想用纯CSS复制下面的gif动画,是否可能,以及如何？我也对其他适当的方法持开放态度.

下面的片段是我到目前为止它只是一个静态的脸.

body {
  background: #fff;
  margin: 50px;
}

.loader {
  position: relative;
  border-radius: 50%;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  background: linear-gradient(to bottom, #fff 50%, #51cf66 50%);
}

.loader:before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  border-radius: 50%;
  background: #fff;
}

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #51cf66;
}

.dot:first-child {
  left: 10px;
  top: 10px;
}

.dot:last-child {
  right: 10px;
  top: 10px;
}

<div class="loader">
  <div class="dot"></div>
  <div …

我试图这样做:

<div class="figure">
  <img src="/some/image.jpg">
  <p class="caption">
    <span class="caption-text">Some caption of any length</span>
   </p>
</div>

因此,标题位于阴影框中,与图像的宽度相同.请注意,.figure有时可以在<td>表格内部,以防万一.它也不应超过父元素的宽度(在必要时缩小图像).

这是我到目前为止所拥有的:

.caption-text {
  font-size: 14px;
  font-family: Lato, proxima-nova, 'Helvetica Neue', Arial, sans-serif;
  font-weight: normal;
  line-height: 0px;
}

.figure {
  max-width: 100%;
  display: inline-block;
  position: relative;
}

.figure img {
  vertical-align: top;
  margin-bottom: 3px;
}

.caption {
  display: block;
  width: 100%;
  position: absolute;
  padding: 10px;
  background-color: #e3e3e3;
  box-sizing: border-box;
  margin: 0;
}

<div style="width:500px">
  <h1>Some Title</h1>

  <!--part I want to style--> …

http://jsfiddle.net/p1my39fh/

table {
    width: 550px;
    border-collapse:collapse;
    margin: auto;
    background-color: #A4A4A4;
    border: 2px solid black;
    padding: 0;
}
table td {
    position: relative;
    text-align: center;
    border: 2px solid green;
    padding: 0;
    margin: 0;
}

<table>
    <tr>
        <td><input type="text" size="30"/></td>
        <td>Test Information</td>
    </tr>
</table>

如何删除周围的空间<input>？

如何使两个<td>宽度相同？

我有两个div,左边和右边,但是当屏幕小于例如500px时,左边的div变成底部div而右边的div变成顶部div,DOM中的div首先显示为第二个和第二个div.

我使用display: flex,然后divs反转但显示内联并忽略100%宽度.怎么了？

HTML

<div class='nav'>
    <div class='container'>
        <div class='left_bottom'>
            LEFT/BOTTOM
        </div>
        <div class='right_top'>
            RIGHT/TOP
        </div>
    </div>
</div>

CSS

.nav{
    background-color: red;
}
.container{
    width: 100%;
}
.left_bottom{
    padding: 15px 0 15px 0;
    background-color: green;
    float: left;
    width: 33.33%;
    text-align: center;
}
.right_top{
    padding: 15px 0 15px 0;
    background-color: blue;
    float: right;
    width: 66.66%;
    text-align: center;
}
@media (max-width: 500px){
    .left_bottom{
        float: left;
        width: 100%;
    }
    .right_top{
        float: left;
        width: 100%;
    }
    .container{
        display: flex;
        flex-direction: row-reverse;
    } …

我有一个div模拟小微调器的块，一切正常，但是css我的配置位于右上翼，我试图将它居中，但是当我从移动设备上看到它时，它从原地移动..可以在不改变不同尺寸设备中的位置的情况下将其居中吗？

.spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}