Когда возвращается initNewWindow()
, переменная window
удаляется, и счетчик ссылок окна падает до нуля, в результате чего новый объект C ++ удаляется. Вот почему ваше окно немедленно закрывается.
Если вы хотите сохранить его открытым, обязательно сохраните ссылку. Самый простой способ сделать это - сделать ваше новое окно дочерним по отношению к вызывающему окну и установить его атрибут виджета WA_DeleteOnClose
(см. Qt::WidgetAttribute
).
Решение состоит в том, чтобы установить div
на display: inline-block
.
Я решил похожую проблему (где я не хотел использовать display: inline-block
, потому что элемент был отцентрирован), добавив тег span
внутри тега div
и переместив форматирование CSS из внешнего [div
тег к новому внутреннему тегу span
. Просто добавьте это как другую альтернативную идею, если display: inline block
не подходит для вас.
Мы можем использовать любой из двух способов для элемента div
:
display: table;
или,
display: inline-block;
, которые я предпочитаю использовать display: table;
, потому что он обрабатывает все лишние пробелы самостоятельно. В то время как display: inline-block
нуждается в некоторой дополнительной фиксации пространства.
Если у вас есть контейнеры, ломающие строки, после нескольких часов поиска хорошего решения CSS и не находящие ни одного, я теперь использую вместо этого jQuery:
$('button').click(function(){
$('nav ul').each(function(){
$parent = $(this).parent();
$parent.width( $(this).width() );
});
});
nav {
display: inline-block;
text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
display: inline;
}
/* needed style */
ul {
padding: 0;
}
body {
width: 420px;
}
/* just style */
body {
background: #ddd;
margin: 1em auto;
}
button {
display: block;
}
nav {
background: #bbb;
margin: 1rem auto;
padding: 0.5rem;
}
li {
display: inline-block;
width: 40px;
height: 20px;
border: solid thin #777;
margin: 4px;
background: #999;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>fix</button>
<nav>
<ul>
<li>3</li>
<li>.</li>
<li>1</li>
<li>4</li>
</ul>
</nav>
<nav>
<ul>
<li>3</li>
<li>.</li>
<li>1</li>
<li>4</li>
<li>1</li>
<li>5</li>
<li>9</li>
<li>2</li>
<li>6</li>
<li>5</li>
<li>3</li>
<li>5</li>
</ul>
</nav>
Я попытался div.classname{display:table-cell;}
, и это сработало!
Вы можете использовать display: flex
для родительского элемента
#parentElement {
display: flex;
flex-direction: column;
align-items: flex-start;
}
. Я бы просто установил padding: -whateverYouWantpx;
Personnaly, я просто делаю это:
HTML-код:
<div>
<table>
</table>
</div>
CSS-код:
div {
display: inline;
}
Если вы примените float к вашему div, он тоже работает, но, очевидно, вам нужно применить «очистить оба» CSS-правила для следующего HTML-элемента.
Вы можете попробовать этот код. Следуйте коду в разделе CSS.
div {
display: inline-block;
padding: 2vw;
background-color: green;
}
table {
width: 70vw;
background-color: white;
}
<div>
<table border="colapsed">
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
</table>
</div>
Вмешавшись в Firebug, я нашел значение свойства -moz-fit-content
, которое точно соответствует желаемому ОП и может быть использовано следующим образом:
width: -moz-fit-content;
Хотя он работает только в Firefox, я не смог найти любой эквивалент для других браузеров, таких как Chrome.
Что, если мы определим глобальную переменную и используем ее для обоих?
:root {
--table-width: 400px;
}
.container{
width:var(--table-width);
border: 1px solid black; // easy visualization
}
.inner-table {
width:var(--table-width);
border: 1px solid red; // easy visualization
}
<div class="container">
<table class="inner-table">
<tr>
<td>abc</td>
</tr>
</table>
</div>
У меня есть span
внутри div
, и просто установка margin: auto
для контейнера div
сработала для меня.
Мне кажется, что это нормально работает во всех браузерах. Примером является фактическое объявление, которое я использую онлайн и в новостной рассылке Просто измените содержимое div. Он будет корректироваться и уменьшаться в зависимости от заданного вами размера отступа.
<div style="float:left; border: 3px ridge red; background: aqua; padding:12px">
<font color=red size=4>Need to fix a birth certificate? Learn <a href="http://www.example.com">Photoshop in a Day</a>!
</font>
</div>
Попробуйте display: inline-block;
. Для того, чтобы он был совместим с разными браузерами, используйте приведенный ниже код CSS.
div {
display: inline-block;
display:-moz-inline-stack;
zoom:1;
*display:inline;
border-style: solid;
border-color: #0000ff;
}
<div>
<table>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
</tr>
</table>
</div>
<div class="parentDiv" style="display:inline-block">
// HTML elements
</div>
Это сделает ширину родительского div такой же, как наибольшая ширина элемента.
Мое CSS3-решение flexbox в двух вариантах: один сверху ведет себя как промежуток, а второй снизу ведет себя как div, беря всю ширину с помощью оболочки. Их классы «top», «bottom» и «bottomwrapper» соответственно.
body {
font-family: sans-serif;
}
.top {
display: -webkit-inline-flex;
display: inline-flex;
}
.top, .bottom {
background-color: #3F3;
border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
display: -webkit-flex;
display: flex;
}
table {
border-collapse: collapse;
}
table, th, td {
width: 280px;
border: 1px solid #666;
}
th {
background-color: #282;
color: #FFF;
}
td {
color: #444;
}
th, td {
padding: 0 4px 0 4px;
}
Is this
<div class="top">
<table>
<tr>
<th>OS</th>
<th>Version</th>
</tr>
<tr>
<td>OpenBSD</td>
<td>5.7</td>
</tr>
<tr>
<td>Windows</td>
<td>Please upgrade to 10!</td>
</tr>
</table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
<div class="bottom">
<table>
<tr>
<th>OS</th>
<th>Version</th>
</tr>
<tr>
<td>OpenBSD</td>
<td>5.7</td>
</tr>
<tr>
<td>Windows</td>
<td>Please upgrade to 10!</td>
</tr>
</table>
</div>
</div>
this is what you are looking for.
Ответ на твой вопрос лежит в будущем, мой друг ...
а именно «встроенный» идет с последним обновлением CSS3
width: intrinsic;
к сожалению IE отстает с ним, поэтому он пока не поддерживает его
Подробнее об этом: CSS Intrinsic & amp; Модуль внешнего определения размера Уровень 3 и Можно ли использовать? : Внутренний и ампер; Внешняя калибровка .
На данный момент вы должны быть удовлетворены с <span>
или <div>
, установленными на
display: inline-block;
display: inline-block
добавляет дополнительный запас вашему элементу.
Я бы порекомендовал это:
#element {
display: table; /* IE8+ and all other modern browsers */
}
Бонус: Теперь вы также можете легко отцентрировать этот модный новый #element
, просто добавив margin: 0 auto
.
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
Foo Hack - кросс-браузерная поддержка для стилей inline-block (2007-11-19) .
Что работает для меня это:
display: table;
в div
. (Проверено на Firefox и Google Chrome ).
Вы можете попробовать fit-content
(CSS3):
div {
width: fit-content;
/* To adjust the height as well */
height: fit-content;
}
Есть два лучших решения
display: inline-block;
ИЛИ
display: table;
Из этих двух display:table;
лучше, , потому что display: inline-block;
добавляет дополнительный запас.
Для display:inline-block;
вы можете использовать метод отрицательного поля для исправления дополнительного пробела
Рабочее демо здесь -
.floating-box {
display:-moz-inline-stack;
display: inline-block;
width: fit-content;
height: fit-content;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
<h2>The Way is using inline-block</h2>
Supporting elements are also added in CSS.
<div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
</div>
Не зная, в каком контексте это появится, но я верю, что свойство стиля CSS float
, либо left
, либо right
, будет иметь такой эффект. С другой стороны, у него будут и другие побочные эффекты, такие как позволение тексту плавать вокруг него.
Пожалуйста, поправьте меня, если я ошибаюсь, я не уверен на 100%, и в настоящее время не могу проверить это сам.
CSS2-совместимое решение состоит в том, чтобы использовать:
.my-div
{
min-width: 100px;
}
Вы также можете плавать ваш div, который заставит его как можно меньше, но вам нужно будет использовать clearfix если что-то внутри вашего div плывет:
.my-div
{
float: left;
}
width:1px;
white-space: nowrap;
отлично работает у меня:)
ОК, во многих случаях вам даже не нужно ничего делать, так как по умолчанию для div для height
и width
задано значение auto, но если это не ваш случай, примените отображение inline-block
. сработает для вас ... посмотрите на код, который я создаю для вас, и он сделает то, что вы ищете:
div {
display: inline-block;
}
<div>
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
<td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
</tr>
</table>
</div>
Это было упомянуто в комментариях, и его трудно найти в одном из ответов, так:
Если вы используете display: flex
по какой-либо причине, вы можете вместо этого использовать:
div {
display: inline-flex;
}
Вы можете сделать это просто с помощью display: inline;
(или white-space: nowrap;
).
Надеюсь, вы найдете это полезным.