使用div和textarea的css列数

Question

这是小提琴，有人可以得到这个，以便文本区域可以与其他列一起显示吗？

https://jsfiddle.net/ckatocnz/

下面的小提琴html示例

<div class="row">
    <div>1</div>
    <div>2</div>
    <div><textarea>3</textarea></div>
    <div>4</div>
    <div>5</div>
</div>

Answer 1

您肯定需要将display: inline-block;应用于.row内的子div。

＆＃13;

＆＃13;

.row div {
  border: 1px solid black;
  display: inline-block;
  width: 100px;
  height: 40px;
  vertical-align: middle;
}

.row textarea {
  box-sizing: border-box; 
  width: 100%;
  height: 40px;
}

＆＃13;

<div class="row">
  <div>1</div>
  <div>2</div>
  <div><textarea>3</textarea></div>
  <div>4</div>
  <div>5</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

＆＃13;

＆＃13;

.row {
	border-width: 1px 1px 1px 1px;
	border-spacing: 2px;
	border-style: outset outset outset outset;
	border-color: black black black black;
	border-collapse: collapse;
	-webkit-column-count: 5; /* Chrome, Safari, Opera */
    -moz-column-count: 5; /* Firefox */
    column-count: 5;
}

.row textarea {
  height: 16px;
}

＆＃13;

<div class="row">
    <div>1</div>
    <div>2</div>
    <div><textarea>3</textarea></div>
    <div>4</div>
    <div>5</div>
</div>

＆＃13;

＆＃13;

＆＃13;