如何将div对象放置在屏幕的最左边？

Question

这里是代码和当前结果：

div.paragraph
{
padding: 30px 25%;
}

div.tableauPlaceholder
{
  position: absolute;
  left: auto;
}

<div class='paragraph'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue ut lectus arcu. Arcu dui vivamus arcu felis bibendum. Nam libero justo laoreet sit amet cursus sit amet dictum. Dictum sit amet justo donec enim. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Fusce id velit ut tortor pretium. Nunc vel risus commodo viverra maecenas accumsan lacus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Laoreet suspendisse interdum consectetur libero id faucibus. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. In fermentum posuere urna nec tincidunt. Vitae et leo duis ut diam quam nulla porttitor massa. Lorem donec massa sapien faucibus et molestie ac feugiat. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae.</p>

<p>Accumsan tortor posuere ac ut consequat semper viverra nam libero. Egestas pretium aenean pharetra magna ac placerat. Nunc mattis enim ut tellus. Quis risus sed vulputate odio. Est placerat in egestas erat imperdiet sed. Aliquam sem fringilla ut morbi tincidunt augue interdum. Imperdiet nulla malesuada pellentesque elit. Egestas congue quisque egestas diam in arcu cursus euismod. Eget mi proin sed libero enim sed faucibus turpis. Congue eu consequat ac felis donec et odio pellentesque diam. Proin sed libero enim sed faucibus turpis in. Nunc mattis enim ut tellus.</p>

<p>Vivamus arcu felis bibendum ut tristique et. Mattis nunc sed blandit libero volutpat. Consequat id porta nibh venenatis cras sed felis eget. Arcu non odio euismod lacinia at. Eu ultrices vitae auctor eu. Eget duis at tellus at urna condimentum mattis pellentesque id. Purus semper eget duis at tellus at urna condimentum mattis. In aliquam sem fringilla ut. Dignissim sodales ut eu sem integer vitae justo eget magna. Amet consectetur adipiscing elit ut aliquam purus sit amet.</p>

<p>Euismod quis viverra nibh cras. Malesuada bibendum arcu vitae elementum. Ut consequat semper viverra nam libero justo laoreet. Consequat id porta nibh venenatis cras sed felis. Magna fermentum iaculis eu non diam. Morbi non arcu risus quis. Libero volutpat sed cras ornare arcu dui vivamus arcu. Id ornare arcu odio ut sem nulla. Nullam ac tortor vitae purus faucibus ornare suspendisse. Adipiscing at in tellus integer feugiat scelerisque varius. At in tellus integer feugiat scelerisque varius morbi enim. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Id diam maecenas ultricies mi eget mauris pharetra et. Sed nisi lacus sed viverra tellus in hac. Eu turpis egestas pretium aenean pharetra magna ac. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam. Dolor purus non enim praesent. Morbi tristique senectus et netus et malesuada fames ac.</p>

<p>Ac turpis egestas integer eget aliquet nibh praesent tristique. Odio tempor orci dapibus ultrices. Viverra aliquet eget sit amet tellus cras adipiscing enim. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Non tellus orci ac auctor augue mauris augue. Diam vulputate ut pharetra sit amet aliquam id. Vitae congue mauris rhoncus aenean vel elit. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum a. Neque vitae tempus quam pellentesque nec nam aliquam. In est ante in nibh mauris. Fermentum et sollicitudin ac orci. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa.</p>

<div class='tableauPlaceholder' id='viz1591849948271' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Br&#47;BrianDennehy&#47;Dashboard1&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='BrianDennehy&#47;Dashboard1' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Br&#47;BrianDennehy&#47;Dashboard1&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='filter' value='mobile=' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1591849948271');                    var vizElement = divElement.getElementsByTagName('object')[0];                    if ( divElement.offsetWidth > 800 ) { vizElement.style.width='1700px';vizElement.style.height='727px';} else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='1700px';vizElement.style.height='727px';} else { vizElement.style.width='100%';vizElement.style.height='1577px';}                     var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue ut lectus arcu. Arcu dui vivamus arcu felis bibendum. Nam libero justo laoreet sit amet cursus sit amet dictum. Dictum sit amet justo donec enim. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Fusce id velit ut tortor pretium. Nunc vel risus commodo viverra maecenas accumsan lacus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Laoreet suspendisse interdum consectetur libero id faucibus. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. In fermentum posuere urna nec tincidunt. Vitae et leo duis ut diam quam nulla porttitor massa. Lorem donec massa sapien faucibus et molestie ac feugiat. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae.</p>

<p>Accumsan tortor posuere ac ut consequat semper viverra nam libero. Egestas pretium aenean pharetra magna ac placerat. Nunc mattis enim ut tellus. Quis risus sed vulputate odio. Est placerat in egestas erat imperdiet sed. Aliquam sem fringilla ut morbi tincidunt augue interdum. Imperdiet nulla malesuada pellentesque elit. Egestas congue quisque egestas diam in arcu cursus euismod. Eget mi proin sed libero enim sed faucibus turpis. Congue eu consequat ac felis donec et odio pellentesque diam. Proin sed libero enim sed faucibus turpis in. Nunc mattis enim ut tellus.</p>

<p>Euismod quis viverra nibh cras. Malesuada bibendum arcu vitae elementum. Ut consequat semper viverra nam libero justo laoreet. Consequat id porta nibh venenatis cras sed felis. Magna fermentum iaculis eu non diam. Morbi non arcu risus quis. Libero volutpat sed cras ornare arcu dui vivamus arcu. Id ornare arcu odio ut sem nulla. Nullam ac tortor vitae purus faucibus ornare suspendisse. Adipiscing at in tellus integer feugiat scelerisque varius. At in tellus integer feugiat scelerisque varius morbi enim. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Id diam maecenas ultricies mi eget mauris pharetra et. Sed nisi lacus sed viverra tellus in hac. Eu turpis egestas pretium aenean pharetra magna ac. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam. Dolor purus non enim praesent. Morbi tristique senectus et netus et malesuada fames ac.</p>
</div>

这里是所需的输出：

问题是嵌入式对象遵循父填充。我进行负填充的尝试无效。所以我尝试做：

div.tableauPlaceholder
{
  position: absolute;
  left: auto;
}

不久前我问了一个类似的问题，并且将transform：translatex（-XX）作为潜在的解决方案，但我不太希望以后再对每个嵌入式对象执行此操作。

我可以尝试其他什么方法？

谢谢！

Answer 1

如果您希望对象停留在屏幕的最左侧，请用此替换我们的css

div.tableauPlaceholder
{
  position: absolute;
  left: 0px;
}

如果给定宽度，没有其他对象溢出tableauPlaceholder，这将很有帮助。

Answer 2

我建议您在CSS中进行以下更改：

.paragraph
{
padding: 30px 0px;
}

.tableauPlaceholder
{
  position: absolute;
  left: 0px;
}

p
{
margin: 0% 25%;
}

<div class='paragraph'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue ut lectus arcu. Arcu dui vivamus arcu felis bibendum. Nam libero justo laoreet sit amet cursus sit amet dictum. Dictum sit amet justo donec enim. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Fusce id velit ut tortor pretium. Nunc vel risus commodo viverra maecenas accumsan lacus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Laoreet suspendisse interdum consectetur libero id faucibus. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. In fermentum posuere urna nec tincidunt. Vitae et leo duis ut diam quam nulla porttitor massa. Lorem donec massa sapien faucibus et molestie ac feugiat. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae.</p>

<p>Accumsan tortor posuere ac ut consequat semper viverra nam libero. Egestas pretium aenean pharetra magna ac placerat. Nunc mattis enim ut tellus. Quis risus sed vulputate odio. Est placerat in egestas erat imperdiet sed. Aliquam sem fringilla ut morbi tincidunt augue interdum. Imperdiet nulla malesuada pellentesque elit. Egestas congue quisque egestas diam in arcu cursus euismod. Eget mi proin sed libero enim sed faucibus turpis. Congue eu consequat ac felis donec et odio pellentesque diam. Proin sed libero enim sed faucibus turpis in. Nunc mattis enim ut tellus.</p>

<p>Vivamus arcu felis bibendum ut tristique et. Mattis nunc sed blandit libero volutpat. Consequat id porta nibh venenatis cras sed felis eget. Arcu non odio euismod lacinia at. Eu ultrices vitae auctor eu. Eget duis at tellus at urna condimentum mattis pellentesque id. Purus semper eget duis at tellus at urna condimentum mattis. In aliquam sem fringilla ut. Dignissim sodales ut eu sem integer vitae justo eget magna. Amet consectetur adipiscing elit ut aliquam purus sit amet.</p>

<p>Euismod quis viverra nibh cras. Malesuada bibendum arcu vitae elementum. Ut consequat semper viverra nam libero justo laoreet. Consequat id porta nibh venenatis cras sed felis. Magna fermentum iaculis eu non diam. Morbi non arcu risus quis. Libero volutpat sed cras ornare arcu dui vivamus arcu. Id ornare arcu odio ut sem nulla. Nullam ac tortor vitae purus faucibus ornare suspendisse. Adipiscing at in tellus integer feugiat scelerisque varius. At in tellus integer feugiat scelerisque varius morbi enim. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Id diam maecenas ultricies mi eget mauris pharetra et. Sed nisi lacus sed viverra tellus in hac. Eu turpis egestas pretium aenean pharetra magna ac. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam. Dolor purus non enim praesent. Morbi tristique senectus et netus et malesuada fames ac.</p>

<p>Ac turpis egestas integer eget aliquet nibh praesent tristique. Odio tempor orci dapibus ultrices. Viverra aliquet eget sit amet tellus cras adipiscing enim. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Non tellus orci ac auctor augue mauris augue. Diam vulputate ut pharetra sit amet aliquam id. Vitae congue mauris rhoncus aenean vel elit. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum a. Neque vitae tempus quam pellentesque nec nam aliquam. In est ante in nibh mauris. Fermentum et sollicitudin ac orci. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa.</p>

<div class='tableauPlaceholder' id='viz1591849948271'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Br&#47;BrianDennehy&#47;Dashboard1&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='BrianDennehy&#47;Dashboard1' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Br&#47;BrianDennehy&#47;Dashboard1&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='filter' value='mobile=' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1591849948271');                    var vizElement = divElement.getElementsByTagName('object')[0];                    if ( divElement.offsetWidth > 800 ) { vizElement.style.width='1700px';vizElement.style.height='727px';} else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='1700px';vizElement.style.height='727px';} else { vizElement.style.width='100%';vizElement.style.height='1577px';}                     var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue ut lectus arcu. Arcu dui vivamus arcu felis bibendum. Nam libero justo laoreet sit amet cursus sit amet dictum. Dictum sit amet justo donec enim. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Fusce id velit ut tortor pretium. Nunc vel risus commodo viverra maecenas accumsan lacus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Laoreet suspendisse interdum consectetur libero id faucibus. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. In fermentum posuere urna nec tincidunt. Vitae et leo duis ut diam quam nulla porttitor massa. Lorem donec massa sapien faucibus et molestie ac feugiat. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae.</p>

<p>Accumsan tortor posuere ac ut consequat semper viverra nam libero. Egestas pretium aenean pharetra magna ac placerat. Nunc mattis enim ut tellus. Quis risus sed vulputate odio. Est placerat in egestas erat imperdiet sed. Aliquam sem fringilla ut morbi tincidunt augue interdum. Imperdiet nulla malesuada pellentesque elit. Egestas congue quisque egestas diam in arcu cursus euismod. Eget mi proin sed libero enim sed faucibus turpis. Congue eu consequat ac felis donec et odio pellentesque diam. Proin sed libero enim sed faucibus turpis in. Nunc mattis enim ut tellus.</p>

<p>Euismod quis viverra nibh cras. Malesuada bibendum arcu vitae elementum. Ut consequat semper viverra nam libero justo laoreet. Consequat id porta nibh venenatis cras sed felis. Magna fermentum iaculis eu non diam. Morbi non arcu risus quis. Libero volutpat sed cras ornare arcu dui vivamus arcu. Id ornare arcu odio ut sem nulla. Nullam ac tortor vitae purus faucibus ornare suspendisse. Adipiscing at in tellus integer feugiat scelerisque varius. At in tellus integer feugiat scelerisque varius morbi enim. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Id diam maecenas ultricies mi eget mauris pharetra et. Sed nisi lacus sed viverra tellus in hac. Eu turpis egestas pretium aenean pharetra magna ac. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam. Dolor purus non enim praesent. Morbi tristique senectus et netus et malesuada fames ac.</p>
</div>

因为您的统计图表位于div段落内，所以position: absolute仅影响父元素，而不影响正文或常规页面。唯一的选择是为p标签本身设置特定的填充