HTML / CSS Размер сюжета - PullRequest
Новая
       14

HTML / CSS Размер сюжета

0 голосов
/ 24 июня 2018

Я пытался создать простой дисплей для пары графиков, построенных с использованием графика. Используя полезные инструменты для встраивания, я смог получить все графики на веб-странице. (довольно просто)

Пример диаграммы для встраивания: 

<div class="graph-container">
<div class="left" margin-bottom = "3vh">
	<a href="https://plot.ly/~WillemvanderSpek/11/" target="_blank" title="data_month" style="display: block; text-align: center;"><img src="https://plot.ly/~WillemvanderSpek/11.png" alt="data_month" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
	<script data-plotly="WillemvanderSpek:11" src="https://plot.ly/embed.js" async></script>
</div>

<div class="right", margin-bottom = "3vh">
	<a href="https://plot.ly/~jorisdh/6/?share_key=hHbxuR1CeSgxuCuc0jspKz" target="_blank" title="n_deaths_state" style="display: block; text-align: center;"><img src="https://plot.ly/~jorisdh/6.png?share_key=hHbxuR1CeSgxuCuc0jspKz" alt="n_deaths_state" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
	<script data-plotly="jorisdh:6" sharekey-plotly="hHbxuR1CeSgxuCuc0jspKz" src="https://plot.ly/embed.js" async></script>
</div>

<div class="left", margin-bottom = "3vh">
	<a href="https://plot.ly/~WillemvanderSpek/2/" target="_blank" title="participant_relationships" style="display: block; text-align: center;"><img src="https://plot.ly/~WillemvanderSpek/2.png" alt="participant_relationships" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
	<script data-plotly="WillemvanderSpek:2" src="https://plot.ly/embed.js" async></script>
</div>

<div class="right", margin-bottom = "3vh">
	<a href="https://plot.ly/~voetbalsil/0/" target="_blank" title="d3-cloropleth-map"><img src="https://plot.ly/~voetbalsil/0.png" alt="d3-cloropleth-map" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
	<script data-plotly="voetbalsil:0" src="https://plot.ly/embed.js" async></script>
</div>

<div class="left", margin-bottom = "3vh">
	<a href="https://plot.ly/~BramBakker/8/" target="_blank" title="stacked-bar-demographics" style="display: block; text-align: center;"><img src="https://plot.ly/~BramBakker/8.png" alt="stacked-bar-demographics" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
	<script data-plotly="BramBakker:8" src="https://plot.ly/embed.js" async></script>
</div>

<div class="right">
	<a href="https://plot.ly/~voetbalsil/12/" target="_blank" title="Gun law strength" style="display: block; text-align: center;"><img src="https://plot.ly/~voetbalsil/12.png" alt="Gun law strength" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
	<script data-plotly="voetbalsil:12" src="https://plot.ly/embed.js" async></script>
</div>
</div>

Теперь, как бы я мог установить размер этих диаграмм и заставить их "сидеть" рядом друг с другом? Я попытался использовать div-размеры в отдельном CSS-файле и попытался изменить размер локально. Наконец, я также попытался использовать сетку для выравнивания графиков, но они просто перекрываются.

Любая обратная связь с благодарностью.

Graphs

1 Ответ

0 голосов
/ 25 июня 2018

Спасибо за разъяснения в комментариях.

'заставьте их "сидеть" рядом друг с другом

На основе названий классов, которые вы использовали (.left, .right) Я предполагаю, что вы хотите, чтобы эти графики были в двух столбцах, и надеюсь, что следующий подход решит вашу проблему. 

.graph-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

display: flex обеспечивает равное распределение пространства между всеми дочерними элементами (.graph), в то время какflex-wrap: wrap при необходимости оборачивает их. 

.graph {
  width: 50%;
}

.graph img {
  width: 100%;
}

width: 50% для .graph дает каждому из них 50% ширины контейнера, в то время как width: 100% для внутренних изображений гарантирует, что изображения, созданные на графиках, неt расширить размер его родителя (.graph) размер.

Если вы хотите узнать больше о display: flex, я настоятельно рекомендую вам это руководство . 

.graph-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.graph {
  width: 50%;
}

.graph img {
  width: 100%;
}
<div class="graph-container">
  <div class="graph left" margin-bottom="3vh">
    <a href="https://plot.ly/~WillemvanderSpek/11/" target="_blank" title="data_month" style="display: block; text-align: center;"><img src="https://plot.ly/~WillemvanderSpek/11.png" alt="data_month" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="WillemvanderSpek:11" src="https://plot.ly/embed.js" async></script>
  </div>

  <div class="graph right" , margin-bottom="3vh">
    <a href="https://plot.ly/~jorisdh/6/?share_key=hHbxuR1CeSgxuCuc0jspKz" target="_blank" title="n_deaths_state" style="display: block; text-align: center;"><img src="https://plot.ly/~jorisdh/6.png?share_key=hHbxuR1CeSgxuCuc0jspKz" alt="n_deaths_state" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="jorisdh:6" sharekey-plotly="hHbxuR1CeSgxuCuc0jspKz" src="https://plot.ly/embed.js" async></script>
  </div>

  <div class="graph left" , margin-bottom="3vh">
    <a href="https://plot.ly/~WillemvanderSpek/2/" target="_blank" title="participant_relationships" style="display: block; text-align: center;"><img src="https://plot.ly/~WillemvanderSpek/2.png" alt="participant_relationships" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="WillemvanderSpek:2" src="https://plot.ly/embed.js" async></script>
  </div>

  <div class="graph right" , margin-bottom="3vh">
    <a href="https://plot.ly/~voetbalsil/0/" target="_blank" title="d3-cloropleth-map"><img src="https://plot.ly/~voetbalsil/0.png" alt="d3-cloropleth-map" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="voetbalsil:0" src="https://plot.ly/embed.js" async></script>
  </div>

  <div class="graph left" , margin-bottom="3vh">
    <a href="https://plot.ly/~BramBakker/8/" target="_blank" title="stacked-bar-demographics" style="display: block; text-align: center;"><img src="https://plot.ly/~BramBakker/8.png" alt="stacked-bar-demographics" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="BramBakker:8" src="https://plot.ly/embed.js" async></script>
  </div>

  <div class="graph right">
    <a href="https://plot.ly/~voetbalsil/12/" target="_blank" title="Gun law strength" style="display: block; text-align: center;"><img src="https://plot.ly/~voetbalsil/12.png" alt="Gun law strength" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="voetbalsil:12" src="https://plot.ly/embed.js" async></script>
  </div>
</div>
...