1 Востаннє редагувалося dialectstat (07.09.2018 16:32:45)

Тема: Як заборонити накладання стовпчиків

Отже, моя сторінка виглядає так у вікні нормальної ширини.

https://drive.google.com/open?id=1XuB_X … i-3In8klDL
Але коли зменшувати вікно, або в мобільному браузері, два стовпчики накладаються
https://drive.google.com/open?id=1OS1AO … 4m75gZSy-S
Як цього уникнути?

Код виглядає так

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 10px;
    height: 20px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Clusters in English from last 24H, doc2vec, dbow, k-means model */
@media screen and (max-width: 1000px) {
    .column {
        width: 100%;
    }
}
</style>
</head>
<body>

<h2>Clusters in English from last 24H</h2>
<p> doc2vec, dbow, dm + k-means model  </p>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2> </h2>
<p>19531 good news from the last 12H </p>
<p> c-330305260, p-287 ['kr', 'kp'] 0.6423050403776311 us <a href="http://www.foxnews.com/world/2018/09/07/ap-explains-what-to-expect-at-n-korea-70th-anniversary-gala.html">AP Explains: What to expect at N.Korea 70th anniversary gala</a> </p>
<p> c-330305260, p-287 ['ru', 'kr', 'kp', 'us'] 0.6423050403776311 us <a href="https://www.chron.com/news/article/The-Cybersecurity-202-Trump-s-praise-for-Kim-13211896.php">The Cybersecurity 202: Trump's praise for Kim Jong Un on same day as Sony hacking charges undercuts deterrence strategy</a> </p>
<p> c-330305260, p-287 ['gu', 'kr', 'kp', 'us'] 0.6423050403776311 ca <a href="https://www.theglobeandmail.com/world/article-book-on-trump-raises-worries-in-south-korea-about-alliance-2/">Book on Trump raises worries in South Korea about alliance</a> </p>

...

<p> c-3, p-1 ['us', 'au'] 11 au <a href="https://www.smartcompany.com.au/entrepreneurs/scale-investors-ariane-barker-societal-expectations-female-entrepreneurship/">An “uphill battle”: Scale Investors’ Ariane Barker on societal expectations and female entrepreneurship</a> </p>
 </div>
 <div class="column" style="background-color:#bbb;">
 <h2>Top 20 news from point of view English-speaking world</h2>
<p>287 -  <a href="https://abcnews.go.com/US/doj-announce-charges-north-koreans-sony-hack-wannacry/story?id=57643239">DOJ announces charges against North Korean hacker for Sony, Wannacry cyber attacks</a> </p>
<p>153 -  <a href="https://in.reuters.com/article/mideast-crisis-syria/iran-russia-turkey-to-decide-fate-of-syrias-idlib-in-tehran-summit-idINKCN1LN10J">Iran, Russia, Turkey to decide fate of Syria's Idlib, air strikes hit rebel areas</a> </p>
<p>107 -  <a href="https://indianexpress.com/article/sports/tennis/us-open-live-score-streaming-women-semifinal-serena-vs-sevastova-osaka-vs-keys-5344029/">US Open 2018 Live Score Streaming, Women’s semi-finals: Serena Williams vs Anastasija Sevastova, Naomi Osaka vs Madison</a> </p>
<p>107 -  <a href="http://bangordailynews.com/2018/09/06/national-politics/conservative-gop-members-ask-trump-to-declassify-documents-related-to-russia-probe/">Conservative GOP members ask Trump to declassify documents related to Russia probe</a> </p>
<p>98 -  <a href="https://www.wltribune.com/news/big-quake-hits-northern-japan-leaving-9-dead-30-missing">Big quake hits northern Japan, leaving 9 dead, 30 missing - Williams Lake Tribune</a> </p>
<p>97 -  <a href="http://www.bnnbloomberg.ca/nafta-deal-unlikely-this-week-talks-to-resume-friday-1.1134342">NAFTA deal unlikely this week as Canada, U.S. resume talks - BNN Bloomberg</a> </p>
<p>87 -  <a href="https://www.firstpost.com/firstcricket/sports-news/india-vs-england-live-cricket-score-5th-test-at-the-oval-day-1-joe-root-wins-toss-again-opts-to-bat-5135491.html">India vs England, LIVE Cricket Score, 5th Test at The Oval, Day 1: Joe Root wins toss again, opts to bat- Firstcricket N</a> </p>
<p>85 -  <a href="https://www.theguardian.com/world/2018/sep/06/brazil-jair-bolsonaro-far-right-presidential-candidate-stabbed">Jair Bolsonaro: Brazil's far-right presidential hopeful stabbed at campaign event</a> </p>
<p>85 -  <a href="http://dev2.cityam.com/262614/us-tech-firms-ask-trump-chinese-tariff-exemptions-ongoing">US tech firms ask Trump for Chinese tariff exemptions in ongoing trade war</a> </p>
<p>84 -  <a href="https://www.thesun.co.uk/tvandshowbiz/7196186/burt-reynolds-dead-age-82-latest/">Burt Reynolds dead – Hollywood legend who starred in Smokey and the Bandit and Boogie Nights dies aged 82</a> </p>
<p>78 -  <a href="http://www.kitco.com/news/2018-09-07/GLOBAL-MARKETS-World-shares-driven-towards-worst-week-since-March-by-trade-tensions.html">GLOBAL MARKETS-World shares driven towards worst week since March by trade tensions</a> </p>
<p>71 -  <a href="https://www.washingtontimes.com/news/2018/sep/7/james-mattis-defense-secretary-makes-surprise-visi/">James Mattis, defense secretary, makes surprise visit to war-weary Kabul</a> </p>
<p>70 -  <a href="bad_url">Kremlin denies accusations against Vladimir Putin for Novichok attack in U.K. The Latest: Russia says UK seeks 'anti-Russian hysteria</a> </p>
<p>68 -  <a href="http://thechronicleherald.ca/business/1595337-ford-recalls-2-million-pickup-trucks-seatbelts-can-cause-fires">Ford recalls 2 million pickup trucks; seatbelts can cause fires</a> </p>
<p>59 -  <a href="https://www.express.co.uk/news/world/1014171/Hurricane-Florence-live-path-update-2018-US-East-Coast-Bermuda-spaghetti-model-NOAA">Hurricane Florence 'defied the odds' Storm could BATTER Bermuda before hitting East Coast</a> </p>
<p>54 -  <a href="http:///news/national/flu-and-common-cold-confirmed-in-sick-passengers-on-emirates-flight-to-jfk">Flu and common cold confirmed in sick passengers on Emirates flight to JFK</a> </p>
<p>52 -  <a href="https://boingboing.net/2018/09/06/mexico-166-human-skulls-found.html">Mexico: 166 human skulls found in Veracruz clandestine mass grave</a> </p>
<p>51 -  <a href="https://www.journal-news.com/news/world/the-latest-says-breakthrough-serbia-kosovo-talks/xzGsTdeB9l7PZ96jEmiyrJ/">The Latest: EU says no breakthrough in Serbia, Kosovo talks</a> </p>
<p>47 -  <a href="https://economictimes.indiatimes.com/news/international/business/british-airways-says-notified-customers-as-soon-as-possible-after-data-breach/articleshow/65717800.cms">British Airways says notified customers as soon as possible after data breach</a> </p>
<p>45 -  <a href="https://www.stuff.co.nz/sport/other-sports/106928064/philadelphia-eagles-stop-ryan-to-jones-again-beat-falcons-1812-in-nfl-opener">Philadelphia Eagles stop Ryan to Jones again, beat Falcons 18-12 in NFL opener</a> </p>
  </div>
  </div>
</div>

</body>
</html>

2

Re: Як заборонити накладання стовпчиків

dialectstat написав:

коли зменшувати вікно, або в мобільному браузері

dialectstat написав:
@media screen and (max-width: 1000px) {
    .column {
        width: 100%;
    }
}

3

Re: Як заборонити накладання стовпчиків

Не зрозумів

4

Re: Як заборонити накладання стовпчиків

Це правило призначене саме для зменшеного вікна (або мобільного браузера). Очевидно, що якщо його прибрати, то накладання не буде.
Втім, я маю підозру, що вам потрібен адаптивний дизайн, щоб на широкому екрані було 2 стовпчики, а на вузькому - один (ви цього не сказали, так що це - виключно мої фантазії). Для цього приберіть height: 20px; з .column - у вас другий .column починається на 20 пікселів нижче за початок першого.

5

Re: Як заборонити накладання стовпчиків

І на майбутнє - викладайте html/css/js на щось на кшталт jsfiddle.net, там можна одразу подивитися, що відбувається.

6

Re: Як заборонити накладання стовпчиків

Дякую, вийшло