Question

我有一个画布和一个侧面div，并且我正在使用display:inline-block;并排显示它们。但这是行不通的。 div侧面的顶部有一些空白空间。这是jsfiddle。我知道我可以通过担任absolute职位来实现这一目标，但是如果有人可以帮助我理解为什么这是错误的，那就太好了。

这是我的代码：

HTML

<div class="mainDiv" >
    <div class="sidebarDiv" >
    HEY
    </div>
    <div class="canvasDiv">
        <canvas #canvas id="canvas"></canvas>
    </div>

</div>

CSS

.mainDiv{
  height: 100vh;
}
.canvasDiv{
    width: calc(100% - 75px);
   display: inline-block;
}

.sidebarDiv{
  display: inline-block;
  background: red;
  width: 50px;
  height: 100%;
}

#canvas {

    background: blue;;
    width:  inherit;
    height: 100% !important;
}

Answer 1

只需在您的div div中添加一个<p className="mb-1">{ fixed.split(/[\r\n]+/).map(line => <div>{line}</div>) }</p>。

const Example = ({fixed}) => {
    return <p className="mb-1">{
        fixed.split(/[\r\n]+/).map(line => <div>{line}</div>)
    }</p>;
};

const str =
  "This is a string with line breaks.\r\n" +
  "Line 2\r\n" +
  "Line 3";
ReactDOM.render(
  <Example fixed={str} />,
  document.getElementById("root")
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>

内联显示不适用于画布元素

1 个答案: