javascript - 如何在另一个上使用 : text on one column, 图像，仅使用引导 div？

Question

我必须构建一个适合任何类型的 html 书面内容(类似杂志)的主题。我想这样布局网页:左边是图片，右边是文字。但是，有些东西不起作用。我还需要只使用引导 div，没有为我自己创建的 div(因为任何 html 页面都不会使用我相同的 div 类等等)。如何在没有不必要的 div 的情况下做到这一点？

我试过:- 左:0 和右:0 的绝对定位，但它不起作用，因为段落重叠并且似乎无法逃脱- 花车-清除，溢出...

查看此处的代码及其麻烦的结果:https://codepen.io/dreamtheater96/pen/ZEzKNKd (我知道这很乱，但我是新手)

p, footer { 
  font-family: 'futurabook', Fallback, sans-serif;
  background-color: white;
  color: black;
  text-transform: lowercase;
  font-size: 17px;
  text-align: justify;

  margin-right: 10px;

height: auto;


}



.col-xs-12 > p { 
  position: relative;
  width: 46%;
  background-color: pink;
float: right;
right: 0;
clear: left;
overflow: auto;   
}


.col-xs-12 > figure {
width: 46%;
position: relative;
float: left;
left: 0;
display: inline-block;
padding: 10px;  
}

我不明白为什么文本不能在右边，我认为内容太多但请记住我不能更改，无论出于何种原因，原始 html(所以我不能把所有的图片例如，在 html 的底部)。

感谢阅读!

Answer 1

在整页上检查答案，我认为这会对您有所帮助。

对于Bootstrap，首先需要了解bootstrap的 GridView 系统。以下链接将帮助您学习 bootstrap。

https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

检查输出。

p, footer { 
  font-family: 'futurabook', Fallback, sans-serif;  background-color: white;
  color: black;  text-transform: lowercase;
  font-size: 17px; text-align: justify;
  margin-right: 10px; height: auto;
}

figure {
width: 46%; position: relative;
float: left; left: 0;
display: inline-block; padding: 10px;
}

img 
{ filter: grayscale(100%); opacity: 0.5; }


.bg 
{ background: #1B2CBD; }

.bg img {
  max-width: 100%; max-height: 100%;
  mix-blend-mode: screen; -webkit-filter: grayscale(100%) contrast(200%);
  filter: grayscale(100%) contrast(200%); opacity: 0.7;
}

<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    
<div class="row">

	<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
		<figure>
			<div class="bg">
				<img src="images/cut_image1.jpg">
			</div>
			<figcaption>Photo: Sergio Corvacho</figcaption>
		</figure>
	</div>

	<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
		<header>
			<h1>The Cut - Money</h1>
			<p> <time> May 28, 2018</time> </p>
			<h2>Maybe She Had So Much Money She Just Lost Track of It</h2>
			<h3>Somebody had to foot the bill for Anna Delvey&rsquo;s fabulous new life. The city was full of marks.</h3>
			<p>By Jessica Pressler</p>
		</header>
		
		<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
			<figure>
				<div class="bg">
					<img src="images/cut_image2.jpg">
				</div>
				<div class="bg">
					<img src="images/cut_image3.jpg">
				</div>
			  <figcaption><em>From left:</em>The Battery in San Francisco.<small>Photo: annadlvv/Instagram;</small> On her way to Art Basel in 2015. <small>Photo: annadlvv/Instagram</small></figcaption>
			</figure>

		</div>

		<div class="col-lg-5 col-md-5 col-xs-5 col-xs-5">
			<p><em>I</em>t started with money, as it so often does in New York. A crisp $100 bill slipped across the smooth surface of the mid-century-inspired concierge desk at 11 Howard, the sleek new boutique hotel in Soho. Looking up, Neffatari Davis, the 25-year-old concierge, who goes by &ldquo;Neff,&rdquo; was surprised to see the cash had come from a young woman who seemed to be around her age. She had a heart-shaped face and pouty lips surrounded by a wild tangle of red hair, her eyes framed by incongruously chunky black glasses that Neff, an aspiring cinematographer with an eye for detail, identified as Céline. She was looking, she said in an accent that sounded European, for &ldquo;the best food in Soho.&rdquo;</p>

			<p>&ldquo;What&rsquo;s your name?&rdquo; Neff asked, after the girl waved off her suggestions of <a href="http://nymag.com/listings/restaurant/carbone/#_ga=2.130399631.1454492887.1554551844-1831093142.1554458789">Carbone</a> and the <a href="http://nymag.com/listings/restaurant/mercer-kitchen/#_ga=2.130399631.1454492887.1554551844-1831093142.1554458789">Mercer Kitchen</a> and settled on the <a href="http://nymag.com/listings/restaurant/the-butchers-daughter/#_ga=2.35428385.1454492887.1554551844-1831093142.1554458789">Butcher&rsquo;s Daughter</a>.</p>

			<p>&ldquo;Anna Delvey,&rdquo; said the young woman. She&rsquo;d be staying at the hotel for a month, she went on, which Neff also found surprising: Usually it was only celebrities who came for such long stretches. But Neff checked the system, and there it was. Delvey was booked into a Howard Deluxe, one of the hotel&rsquo;s midrange options, about $400 a night, with ceramic sculptures on the walls and oversize windows looking onto the bustling streets of Soho. It was February 18, 2017.</p>

			<p>&ldquo;Thanks,&rdquo; said Delvey. &ldquo;See you around.&rdquo;</p>

			<p>That turned out to be a promise. Over the next few weeks, Delvey stopped by often to ask Neff&rsquo;s advice, slipping her $100 each time. Neff would wax on about how <a href="http://nymag.com/listings/bar/mr-purple/#_ga=2.32947134.1454492887.1554551844-1831093142.1554458789">Mr. Purple</a> was totally washed and <a href="http://nymag.com/listings/bar/vandal/#_ga=2.32947134.1454492887.1554551844-1831093142.1554458789">Vandal</a> was for hipsters, while Delvey&rsquo;s eyes would flit around behind her glasses. Eventually, Neff realized: Delvey already <em>knew</em> all the cool places to go — not only that, she knew the names of the bartenders and waiters and owners. &ldquo;This is not a guest that needs my <em>help</em>,&rdquo; it dawned on her. &ldquo;This is a guest that wants my <em>time</em>.&rdquo;</p>

			<p>This was not out of the ordinary. Since she&rsquo;d started working there, Neff, a Washington, D.C., native with a wedge of natural hair, giant Margaret Keane eyes, and a gap-toothed smile, had found herself playing therapist to all manner of hotel guests: husbands cheating on their wives, wives getting away from their husbands. &ldquo;You just sit there and listen, because that&rsquo;s your concierge life,&rdquo; she recalled recently, at a coffee shop near her apartment in Crown Heights.</p>

			<p>Usually, these guests went back to their own lives, leaving Neff to hers. But February became March, and Delvey kept showing up. She&rsquo;d bring food down, or a glass of extra-dry white wine, and settle near Neff&rsquo;s desk to chat. Some of the other hotel employees found Anna deeply annoying. She could be oddly ill-mannered for a rich person: <em>Please</em> and <em>thank you</em> were not in her vocabulary, and she would sometimes say things that were &ldquo;Not <em>racist</em>,&rdquo; Neff said, &ldquo;but <em>classist</em>.&rdquo; (&ldquo;What are you bitches, broke?&rdquo; Anna asked her and another hotel employee.) But to Neff, it didn&rsquo;t come across as mean-spirited. More like she was some kind of old-fashioned princess who&rsquo;d been plucked from an ancient European castle and deposited in the modern world, although according to Anna she came from modern-day Germany and her father ran a business producing solar panels. And despite her unassuming figure — &ldquo;a sort of <em>Sound of Music</em> Fräulein,&rdquo; one acquaintance later put it — Anna quickly established herself as one of 11 Howard&rsquo;s most generous guests. &ldquo;People would fight to take her packages upstairs,&rdquo; said Neff. &ldquo;<em>Fight</em>, because you knew you were getting $100.&rdquo; Over time, Delvey got more and more comfortable in the hotel, swanning around in sheer Alexander Wang leggings or, occasionally, a hotel robe. &ldquo;She <em>ran</em> that place,&rdquo; said Neff. &ldquo;You know how Rihanna walks out with wineglasses? That was Anna. And they let her. <em>Bye, Ms. Delvey</em> …&rdquo;</p>

			<p>Anna was preparing to launch a business, a Soho House–ish type club, she told Neff, focused on art, with locations in L.A., London, Hong Kong, and Dubai, and Neff became her de facto secretary, organizing business lunches and dinners at restaurants like Seamore&rsquo;s and the hotel&rsquo;s own Le Coucou. (&ldquo;That&rsquo;s what they do in the rich culture, is meals,&rdquo; said Neff.) On occasion, when Delvey showed up while the concierge desk was busy, she would stand at the counter, coolly counting out bills until she got Neff&rsquo;s attention. &ldquo;I&rsquo;d be like, &lsquo;Anna, there&rsquo;s a line of eight people.&rsquo; But she&rsquo;d keep putting money down.&rdquo; And even though Neff had begun to think of Anna as not just a hotel guest but a friend, <em>a real friend</em>, she didn&rsquo;t hesitate to take it. &ldquo;A little selfish of me,&rdquo; she admitted later. &ldquo;But … yeah.&rdquo;</p>

			<p>Who can blame her? This was Manhattan in the 21st century, and money is more powerful than ever. Rare is the city dweller who, when presented with an opportunity for a sudden and unexpected influx of cash, doesn&rsquo;t grasp for it. Of course, this money almost always comes with strings attached. Sometimes you can barely see them, like that vaudeville bit in which the pawn dives for a loose bill only to find it pulled just ahead. Still, everyone makes the reach. Because here, money is the one thing that no one can ever have enough of.</p>
		</div>

	</div>
</div>