Текст перемещается на следующую строку после div - PullRequest
Новая
       3

Текст перемещается на следующую строку после div

0 голосов
/ 01 ноября 2019

Сведения о выпуске

Текст перемещается на следующую строку после квадрата.

Ожидается - текст должен быть сразу после квадрата.

Я что-то пропустил?

JS Fiddle Link 

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div class="container-fluid">

    <div class="row">
      <div class="col-md-6">
        <div id="chartjsLegend" class="chartjsLegend">
          <div style="width:15px;height:15px;background-color:rgb(0, 0, 0)"></div>Q1 - 29.00%
          <div style="width:15px;height:15px;background-color:rgb(255, 0, 0)"></div>Q2 - 23.78%
          <div style="width:15px;height:15px;background-color:rgb(0, 255, 0)"></div>Q3 - 19.89%
          <div style="width:15px;height:15px;background-color:rgb(0, 0, 255)"></div>Q4 - 27.33%
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 01 ноября 2019

Используйте float:left во всех div

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div id="chartjsLegend" class="chartjsLegend">
                <div style="width:100%"> 
                    <div style="width:15px;height:15px;background-color:rgb(0, 0, 0);float:left"></div> Q1 - 29.00%
                </div>
                <div style="width:100%"> 
                    <div style="width:15px;height:15px;background-color:rgb(255, 0, 0);float:left"></div>Q2 - 23.78%
                </div>
                <div style="width:100%"> 
                    <div style="width:15px;height:15px;background-color:rgb(0, 255, 0);float:left"></div>Q3 - 19.89%
                </div>
                <div style="width:100%"> 
                    <div style="width:15px;height:15px;background-color:rgb(0, 0, 255);float:left"></div>Q4 - 27.33%
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div id="canvas-holder" style="width:200px;">
                <canvas id="chart-area" width="100" height="100" />				
            </div>
        </div>
    </div>
</div>
</body>
</html>

Кодовая ссылка: https://codepen.io/bhavik103/pen/oNNoVLo

0 голосов
/ 01 ноября 2019

Поскольку div является блочным элементом, он будет занимать всю строку. Вот почему текст переходит на следующую строку. Чтобы предотвратить это поведение по умолчанию, нам нужно явно изменить свойство div display на inline-block. 

<html>
	<head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	<body>
		<div class="container-fluid">
			
			<div class="row">
				<div class="col-md-6">
					<div id="chartjsLegend" class="chartjsLegend">
          <div>
              <div style="width:15px;height:15px;background-color:rgb(0, 0, 0);display:inline-block;"></div>Q1 - 29.00%
          </div>
					<div>
              <div style="width:15px;height:15px;background-color:rgb(255, 0, 0);display:inline-block;"></div>Q2 - 23.78%
          </div>
					<div>
              <div style="width:15px;height:15px;background-color:rgb(0, 255, 0);display:inline-block"></div>Q3 - 19.89%
          </div>
					<div>
						  <div style="width:15px;height:15px;background-color:rgb(0, 0, 255);display:inline-block"></div>Q4 - 27.33%
					</div>
				</div>
				<div class="col-md-6">
					<div id="canvas-holder" style="width:200px;">
						<canvas id="chart-area" width="100" height="100" />				
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...