允许子元素扩展到父级 div 的内边距之外

Question

我的包装 div 之一有它自己的填充，并且需要它来进行组织布局。然而，其中一个子组件需要完全穿过屏幕，因此基本上忽略它的父组件设置的填充。我怎样才能让这个子组件完全穿过它的父 div，忽略为其设置的填充？这是我所拥有的示例，以及有关我正在尝试执行的操作的一些进一步说明：const App = () => {  return (    <div style={{ padding: 20, backgroundColor: 'red' }}>      <h3>See the following blue background paragraph. I want it to go beyond the padding I set for the parent div</h3>      <p style={{overflowX: 'scroll', whiteSpace: 'nowrap', backgroundColor: 'blue'}}>      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  </p>        <h3>Think of it this way: I still want it to scroll as needed, but, I want it to completely go across my parent div, surpassing the padding set on it.</h3>    </div>  )}ReactDOM.render(    <App />,    document.getElementById('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="app"></div>

Answer 1

您可以将 设为<p>绝对元素。见下文：

const App = () => {

  return (

    <div style={{ padding: 20, backgroundColor: 'red', position: 'relative' }}>

      <h3>See the following blue background paragraph. I want it to go beyond the padding I set for the parent div</h3>

<div style={{ paddingBottom: 30}}><p style={{overflowX: 'scroll', whiteSpace: 'nowrap', backgroundColor: 'blue', position: 'absolute', left: 0, right: 0, margin: 'auto'}}>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  </p>

</div>  

        <h3>Think of it this way: I still want it to scroll as needed, but, I want it to completely go across my parent div, surpassing the padding set on it.</h3>

    </div>

  )

}

ReactDOM.render(

    <App />,

    document.getElementById('app')

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

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

<div id="app"></div>

Answer 2

你可以给它负边距等于你父母的填充，所以也许像这样？

const App = () => {

  return (

    <div style={{ padding: 20, backgroundColor: 'red' }}>

      <h3>See the following blue background paragraph. I want it to go beyond the padding I set for the parent div</h3>

      <p style={{overflowX: 'scroll', whiteSpace: 'nowrap', backgroundColor: 'blue', margin: -20}}>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  </p>

        <h3>Think of it this way: I still want it to scroll as needed, but, I want it to completely go across my parent div, surpassing the padding set on it.</h3>

    </div>

  )

}

ReactDOM.render(

    <App />,

    document.getElementById('app')

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

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

<div id="app"></div>