问:
Should volatile and readonly be mutually exclusive?
Suppose that I were designing a thread-safe class that wraps an internal collection:

```<code>public class ThreadSafeQueue<T>
{
    private readonly Queue<T> _queue = new Queue<T>();

    public void Enqueue(T item)
    {
        lock (_queue)
        {
            _queue.Enqueue(item);
        }
    }

    // ...
}
</code>```

Based on my other question, the above implementation is buggy, as race hazards may arise when its initialization is performed concurrently with its usage:

```<code>ThreadSafeQueue<int> tsqueue = null;

Parallel.Invoke(
    () => tsqueue = new ThreadSafeQueue<int>(),
    () => tsqueue?.Enqueue(5));
</code>```

The code above is acceptably non-deterministic: the item may or may not be enqueued. However, under the current implementation, it is also broken, and can give rise to unpredictable behaviour, such as throwing IndexOutOfRangeException, NullReferenceException, enqueueing the same item multiple times, or getting stuck in an infinite loop. This occurs since the Enqueue call might run after the new instance has been assigned to the local variable tsqueue, but before the initialization of the internal _queue field completes (or appears to complete).

Per Jon Skeet:

The Java memory model doesn't ensure that the constructor completes before the reference to the new object is assigned to instance. The Java memory model underwent a reworking for version 1.5, but double-check locking is still broken after this without a volatile variable (as in C#).

This race hazard could be resolved by adding a memory barrier to the constructor:

```<code>    public ThreadSafeQueue()
    {
        Thread.MemoryBarrier();
    }
</code>```

Equivalently, it could be more concisely resolved by making the field volatile:

```<code>    private volatile readonly Queue<T> _queue = new Queue<T>();
</code>```

However, the latter is forbidden by the C# compiler:

```<code>'Program.ThreadSafeQueue<T>._queue': a field cannot be both volatile and readonly
</code>```

Given that the above seems like a justifiable use-case for volatile readonly, is this limitation a flaw in the language design?

I'm aware that one could simply remove the readonly, since it does not affect the public interface of the class. However, that is beside the point, since the same could be said for readonly in general. I'm also aware of the existing question “Why readonly and volatile modifiers are mutually exclusive?”; however, that tackled a different issue.

Concrete scenario: This issue seems to affect code in the System.Collections.Concurrent namespace of the .NET Framework Class Library itself. The ConcurrentQueue<T>.Segment nested class has several fields that are only ever assigned within the constructor: m_array, m_state, m_index, and m_source. Of these, only m_index is declared as readonly; the others cannot be – although they should – since they need to be declared as volatile to meet the requirements of thread-safety.

```<code>private class Segment
{
    internal volatile T[] m_array;                  // should be readonly too
    internal volatile VolatileBool[] m_state;       // should be readonly too
    private volatile Segment m_next;
    internal readonly long m_index;
    private volatile int m_low;
    private volatile int m_high;
    private volatile ConcurrentQueue<T> m_source;   // should be readonly too

    internal Segment(long index, ConcurrentQueue<T> source)
    {
        m_array = new T[SEGMENT_SIZE];              // field only assigned here
        m_state = new VolatileBool[SEGMENT_SIZE];   // field only assigned here
        m_high = -1;
        m_index = index;                            // field only assigned here
        m_source = source;                          // field only assigned here
    }

    internal void Grow()
    {
        // m_index and m_source need to be volatile since race hazards
        // may otherwise arise if this method is called before
        // initialization completes (or appears to complete)
        Segment newSegment = new Segment(m_index + 1, m_source);
        m_next = newSegment;
        m_source.m_tail = m_next;
    }

    // ...
}
</code>```

答:
```<code>ThreadSafeQueue<int> tsqueue = null;

Parallel.Invoke(
    () => tsqueue = new ThreadSafeQueue<int>(),
    () => tsqueue?.Enqueue(5));
</code>```

In your example the issue is that tsqueue is published in non-thread safe manner. And in this scenario it's absolutely possible to get a partially constructed object on architectures like ARM. So, mark tsqueue as volatile or assign the value with Volatile.Write method.

This issue seems to affect code in the System.Collections.Concurrent
  namespace of the .NET Framework Class Library itself. The
  ConcurrentQueue.Segment nested class has several fields that are
  only ever assigned within the constructor: m_array, m_state, m_index,
  and m_source. Of these, only m_index is declared as readonly; the
  others cannot be – although they should – since they need to be
  declared as volatile to meet the requirements of thread-safety.

Marking fields as readonly just adds some constraints that compiler checks and that JIT might later use for optimizations (but JIT is smart enough to figure out that field is readonly even without that keyword in some cases). But marking these particular fields volatile is much more important because of concurrency. private and internal fields are under control of the author of that library, so it's absolutely ok to omit readonly there.

Body:
Suppose that I were designing a thread-safe class that wraps an internal collection:

public class ThreadSafeQueue<T>
{
    private readonly Queue<T> _queue = new Queue<T>();

    public void Enqueue(T item)
    {
        lock (_queue)
        {
            _queue.Enqueue(item);
        }
    }

    // ...
}

Based on my other question, the above implementation is buggy, as race hazards may arise when its initialization is performed concurrently with its usage:

ThreadSafeQueue<int> tsqueue = null;

Parallel.Invoke(
    () => tsqueue = new ThreadSafeQueue<int>(),
    () => tsqueue?.Enqueue(5));

The code above is acceptably non-deterministic: the item may or may not be enqueued. However, under the current implementation, it is also broken, and can give rise to unpredictable behaviour, such as throwing IndexOutOfRangeException, NullReferenceException, enqueueing the same item multiple times, or getting stuck in an infinite loop. This occurs since the Enqueue call might run after the new instance has been assigned to the local variable tsqueue, but before the initialization of the internal _queue field completes (or appears to complete).

Per Jon Skeet:

The Java memory model doesn't ensure that the constructor completes before the reference to the new object is assigned to instance. The Java memory model underwent a reworking for version 1.5, but double-check locking is still broken after this without a volatile variable (as in C#).

This race hazard could be resolved by adding a memory barrier to the constructor:

    public ThreadSafeQueue()
    {
        Thread.MemoryBarrier();
    }

Equivalently, it could be more concisely resolved by making the field volatile:

    private volatile readonly Queue<T> _queue = new Queue<T>();

However, the latter is forbidden by the C# compiler:

'Program.ThreadSafeQueue<T>._queue': a field cannot be both volatile and readonly

Given that the above seems like a justifiable use-case for volatile readonly, is this limitation a flaw in the language design?

I'm aware that one could simply remove the readonly, since it does not affect the public interface of the class. However, that is beside the point, since the same could be said for readonly in general. I'm also aware of the existing question “Why readonly and volatile modifiers are mutually exclusive?”; however, that tackled a different issue.

Concrete scenario: This issue seems to affect code in the System.Collections.Concurrent namespace of the .NET Framework Class Library itself. The ConcurrentQueue<T>.Segment nested class has several fields that are only ever assigned within the constructor: m_array, m_state, m_index, and m_source. Of these, only m_index is declared as readonly; the others cannot be – although they should – since they need to be declared as volatile to meet the requirements of thread-safety.

private class Segment
{
    internal volatile T[] m_array;                  // should be readonly too
    internal volatile VolatileBool[] m_state;       // should be readonly too
    private volatile Segment m_next;
    internal readonly long m_index;
    private volatile int m_low;
    private volatile int m_high;
    private volatile ConcurrentQueue<T> m_source;   // should be readonly too

    internal Segment(long index, ConcurrentQueue<T> source)
    {
        m_array = new T[SEGMENT_SIZE];              // field only assigned here
        m_state = new VolatileBool[SEGMENT_SIZE];   // field only assigned here
        m_high = -1;
        m_index = index;                            // field only assigned here
        m_source = source;                          // field only assigned here
    }

    internal void Grow()
    {
        // m_index and m_source need to be volatile since race hazards
        // may otherwise arise if this method is called before
        // initialization completes (or appears to complete)
        Segment newSegment = new Segment(m_index + 1, m_source);
        m_next = newSegment;
        m_source.m_tail = m_next;
    }

    // ...
}

Body:
ThreadSafeQueue<int> tsqueue = null;

Parallel.Invoke(
    () => tsqueue = new ThreadSafeQueue<int>(),
    () => tsqueue?.Enqueue(5));

In your example the issue is that tsqueue is published in non-thread safe manner. And in this scenario it's absolutely possible to get a partially constructed object on architectures like ARM. So, mark tsqueue as volatile or assign the value with Volatile.Write method.

This issue seems to affect code in the System.Collections.Concurrent
  namespace of the .NET Framework Class Library itself. The
  ConcurrentQueue.Segment nested class has several fields that are
  only ever assigned within the constructor: m_array, m_state, m_index,
  and m_source. Of these, only m_index is declared as readonly; the
  others cannot be – although they should – since they need to be
  declared as volatile to meet the requirements of thread-safety.

Marking fields as readonly just adds some constraints that compiler checks and that JIT might later use for optimizations (but JIT is smart enough to figure out that field is readonly even without that keyword in some cases). But marking these particular fields volatile is much more important because of concurrency. private and internal fields are under control of the author of that library, so it's absolutely ok to omit readonly there.


来源: stackexchange

问:
How to calculate total storage consumption in a Azure subscription
I am trying to figure out if there is any way to find out total storage consumed in a Azure subscription, either via PowerShell or may be OMS. Any help will be appreciated. Thanks in advance. </p>

答:
I haven't tried it myself but from reading the article you should be able to use some of his Powershell code.
http://www.azurefieldnotes.com/2017/03/12/how-to-calculate-azure-vhds-used-space/</p>

ContentLicense: CC BY-SA 3.0


问:
docfx project with git under tfs
I'm trying to create docfx project. Sources are hosted on TFS server in GIT repository.

Everything is ok except absence of Improve this Doc link.

Is there way to make this link appear and work for such configuration?

答:
I could reproduce your scenario. There is no Improve this Doc link when you the repo clone from TFS 2017, but the link does show up when you clone repo from VSTS. It seems Improve this Doc link doesn't support on-premises TFS, I'd like to suggest you open an issue on the site below to get help from Docfx side:

https://github.com/dotnet/docfx/issues

Title: docfx project with git under tfs


问:
Keep div inside Container
I've the snippet below, and if you look into it then you can see that the lowest level of items is outside the container.

I know its because of the position:absolute; transform:translate(-33%).
But it's the only way so far i've been able to center the elements below the it's parrent.

Is the some way to "put" the 3 lowest elements into the container and make the whole thing scroll able from left to right?

body {
  background-color: #eaeaea;
  width: 2000px
}

.CB {
  background-color: #c4cfd8;
  width: 1200px;
  margin: 0 auto;
  margin-top: 50px;
  user-select: none;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 200vh;
}

.CB .CB_Menu {
  width: 100%;
  height: 35px;
  background-color: #fff;
  margin-bottom: 20px;
}

.CB .CB_Content .Products,
.CB .CB_Content .Parts {
  text-align: center;
}

.CB .CB_Content .Products > div,
.CB .CB_Content .Parts > div {
  display: inline-block;
}

.CB .CB_Content .Products > div > div,
.CB .CB_Content .Parts > div > div {
  display: inline-table;
}

.CB .CB_Content .Products .Product,
.CB .CB_Content .Parts .Product,
.CB .CB_Content .Products .Part,
.CB .CB_Content .Parts .Part {
  width: 200px;
  height: 200px;
  background-color: #fff;
  margin: 0 10px;
  display: inline-table;
  border-radius: 5px;
  position: relative;
}

.CB .CB_Content .Products .Product .Product_Header,
.CB .CB_Content .Parts .Product .Product_Header,
.CB .CB_Content .Products .Part .Product_Header,
.CB .CB_Content .Parts .Part .Product_Header,
.CB .CB_Content .Products .Product .Part_Header,
.CB .CB_Content .Parts .Product .Part_Header,
.CB .CB_Content .Products .Part .Part_Header,
.CB .CB_Content .Parts .Part .Part_Header {
  background-color: #eaeaea;
  width: 100%;
  text-align: left;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.CB .CB_Content .Products .Product .Product_Header span,
.CB .CB_Content .Parts .Product .Product_Header span,
.CB .CB_Content .Products .Part .Product_Header span,
.CB .CB_Content .Parts .Part .Product_Header span,
.CB .CB_Content .Products .Product .Part_Header span,
.CB .CB_Content .Parts .Product .Part_Header span,
.CB .CB_Content .Products .Part .Part_Header span,
.CB .CB_Content .Parts .Part .Part_Header span {
  font-size: 16px;
}

.CB .CB_Content .Products .Product .Product_Header span a,
.CB .CB_Content .Parts .Product .Product_Header span a,
.CB .CB_Content .Products .Part .Product_Header span a,
.CB .CB_Content .Parts .Part .Product_Header span a,
.CB .CB_Content .Products .Product .Part_Header span a,
.CB .CB_Content .Parts .Product .Part_Header span a,
.CB .CB_Content .Products .Part .Part_Header span a,
.CB .CB_Content .Parts .Part .Part_Header span a {
  float: right;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Content,
.CB .CB_Content .Parts .Product .Product_Content,
.CB .CB_Content .Products .Part .Product_Content,
.CB .CB_Content .Parts .Part .Product_Content,
.CB .CB_Content .Products .Product .Part_Content,
.CB .CB_Content .Parts .Product .Part_Content,
.CB .CB_Content .Products .Part .Part_Content,
.CB .CB_Content .Parts .Part .Part_Content {
  text-align: left;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_Left,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_Left,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_Left,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_Left,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_Left,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_Left,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_Left,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_Left,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_Left,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_Left,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_Left,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_Left,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_Left,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_Left,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_Left,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_Left {
  width: 50%;
  min-height: 120px;
  float: left;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_Left a,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_Left a,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_Left a,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_Left a,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_Left a,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_Left a,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_Left a,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_Left a {
  display: block;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_right,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_right,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_right,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_right,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_right,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_right,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_right,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_right,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_right,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_right,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_right,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_right,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_right,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_right,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_right,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_right {
  width: 50%;
  min-height: 120px;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_right img,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_right img,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_right img,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_right img,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_right img,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_right img,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_right img,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_right img,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_right img,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_right img,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_right img,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_right img,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_right img,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_right img,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_right img,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_right img {
  width: 100%;
}

.CB .CB_Content .Products .Product .Product_Footer,
.CB .CB_Content .Parts .Product .Product_Footer,
.CB .CB_Content .Products .Part .Product_Footer,
.CB .CB_Content .Parts .Part .Product_Footer,
.CB .CB_Content .Products .Product .Part_Footer,
.CB .CB_Content .Parts .Product .Part_Footer,
.CB .CB_Content .Products .Part .Part_Footer,
.CB .CB_Content .Parts .Part .Part_Footer {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.CB .CB_Content .Products .Product .Product_Footer a,
.CB .CB_Content .Parts .Product .Product_Footer a,
.CB .CB_Content .Products .Part .Product_Footer a,
.CB .CB_Content .Parts .Part .Product_Footer a,
.CB .CB_Content .Products .Product .Part_Footer a,
.CB .CB_Content .Parts .Product .Part_Footer a,
.CB .CB_Content .Products .Part .Part_Footer a,
.CB .CB_Content .Parts .Part .Part_Footer a {
  width: 50%;
  height: 25px;
  border: 1px solid #dddddd;
  background-color: #eaeaea;
  border-radius: 5px;
  margin-bottom: 10px;
  line-height: 25px;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Footer button,
.CB .CB_Content .Parts .Product .Product_Footer button,
.CB .CB_Content .Products .Part .Product_Footer button,
.CB .CB_Content .Parts .Part .Product_Footer button,
.CB .CB_Content .Products .Product .Part_Footer button,
.CB .CB_Content .Parts .Product .Part_Footer button,
.CB .CB_Content .Products .Part .Part_Footer button,
.CB .CB_Content .Parts .Part .Part_Footer button {
  width: 50%;
  height: 25px;
  border: 1px solid #dddddd;
  background-color: #eaeaea;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 4px 6px;
  color: #000;
}

.CB .CB_Content .lineTop {
  height: 25px;
  width: calc(100% - 25%);
  border-top: 1px dotted #fff;
  border-right: 1px dotted #fff;
  border-left: 1px dotted #fff;
  margin: 0 110px;
  display: none;
}

.CB .CB_Content .lineTop.active {
  display: block;
}

.CB .CB_Content .lineTop.none {
  border-right: none;
  width: 1px;
  margin-top: -2px;
}

.CB .CB_Content .lineTop.two {
  width: calc(100% - 50%);
}

.CB .CB_Content .lineTop .LineTop_Line {
  width: 219px;
  height: 100%;
  border-right: 1px dotted #fff;
  float: left;
}

.CB .CB_Content .lineBottom {
  display: none;
  height: 25px;
  width: 100%;
}

.CB .CB_Content .lineBottom.active {
  display: block;
}

.CB .CB_Content .lineBottom .LineBottom_Line {
  width: 50%;
  height: 100%;
  border-right: 1px dotted #fff;
}

.CB .CB_Content .lineBottom .LineBottom_Line.Test {
  width: calc(50% - 300px);
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="CB">

  <div class="CB_Menu">
    header
  </div>

  <div class="CB_Content">

    <div class="Products">
      <div>
        <div class="Product">
          <div class="Product_Header">
            <span>Title<i class="fa fa-ellipsis-h"></i></span>
          </div>
          <div class="Product_Content">
            <div class="Product_Content_Left">
              Link 1
              Link 2
            </div>
            <div class="Product_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Product_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>
        <div class="lineBottom active">
          <div class="LineBottom_Line"></div>
        </div>
      </div>
    </div>
    <div class="Parts">
      <div>
        <div class="lineTop active">
          <div class="LineTop_Line"></div>
          <div class="LineTop_Line"></div>
        </div>
        <div>
          <div class="Part">
            <div class="Part_Header">
              <span>Title<i class="fa fa-ellipsis-h"></i></span>
            </div>
            <div class="Part_Content">
              <div class="Part_Content_Left">
                Link 1
                Link 2
              </div>
              <div class="Part_Content_right">
                <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
              </div>
            </div>
            <div class="Part_Footer">
              <button>Show <i class="fa fa-caret-down"></i></button>
            </div>
          </div>

          <div style="position:absolute; transform:translate(-33%)">
            <div class="lineBottom active">
              <div class="LineBottom_Line"></div>
            </div>

            <div class="sub_part">
              <div class="lineTop active">
                <div class="LineTop_Line"></div>
              </div>
              <div class="Parts">
                <div>
                  <div class="Part">
                    <div class="Part_Header">
                      <span>Title<i class="fa fa-ellipsis-h"></i></span>
                    </div>
                    <div class="Part_Content">
                      <div class="Part_Content_Left">
                        Link 1
                        Link 2
                      </div>
                      <div class="Part_Content_right">
                        <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                      </div>
                    </div>
                    <div class="Part_Footer">
                      <button>Show <i class="fa fa-caret-down"></i></button>
                    </div>
                  </div>
                  <div class="Part">
                    <div class="Part_Header">
                      <span>Title<i class="fa fa-ellipsis-h"></i></span>
                    </div>
                    <div class="Part_Content">
                      <div class="Part_Content_Left">
                        Link 1
                        Link 2
                      </div>
                      <div class="Part_Content_right">
                        <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                      </div>
                    </div>
                    <div class="Part_Footer">
                      <button>Show <i class="fa fa-caret-down"></i></button>
                    </div>
                  </div>
                  <div class="Part">
                    <div class="Part_Header">
                      <span>Title<i class="fa fa-ellipsis-h"></i></span>
                    </div>
                    <div class="Part_Content">
                      <div class="Part_Content_Left">
                        Link 1
                        Link 2
                      </div>
                      <div class="Part_Content_right">
                        <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                      </div>
                    </div>
                    <div class="Part_Footer">
                      <button>Show <i class="fa fa-caret-down"></i></button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="Part">
          <div class="Part_Header">
            <span>Title<i class="fa fa-ellipsis-h"></i></span>
          </div>
          <div class="Part_Content">
            <div class="Part_Content_Left">
              Link 1
              Link 2
            </div>
            <div class="Part_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Part_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>
        <div class="Part">
          <div class="Part_Header">
            <span>Title<i class="fa fa-ellipsis-h"></i></span>
          </div>
          <div class="Part_Content">
            <div class="Part_Content_Left">
              Link 1
              Link 2
            </div>
            <div class="Part_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Part_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>
        <div class="Part">
          <div class="Part_Header">
            <span>Title<i class="fa fa-ellipsis-h"></i></span>
          </div>
          <div class="Part_Content">
            <div class="Part_Content_Left">
              Link 1
              Link 2
            </div>
            <div class="Part_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Part_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>

      </div>
    </div>
  </div>
</div></code>```

答:
Are you trying to achieve this?  Changes that you have to make:

Remove the fixed width of body i.e width:2000px.

Remove the fixed width of CB class i.e width:1200px.

You can set the width to auto or leave them be and they will expand horizontally as needed.

body {
  background-color: #eaeaea;
}

.CB {
  background-color: #c4cfd8;
  width: auto;
  margin: 0 auto;
  margin-top: 50px;
  user-select: none;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 200vh;
}

.CB .CB_Menu {
  width: 100%;
  height: 35px;
  background-color: #fff;
  margin-bottom: 20px;
}

.CB .CB_Content .Products,
.CB .CB_Content .Parts {
  text-align: center;
}

.CB .CB_Content .Products > div,
.CB .CB_Content .Parts > div {
  display: inline-block;
}

.CB .CB_Content .Products > div > div,
.CB .CB_Content .Parts > div > div {
  display: inline-table;
}

.CB .CB_Content .Products .Product,
.CB .CB_Content .Parts .Product,
.CB .CB_Content .Products .Part,
.CB .CB_Content .Parts .Part {
  width: 200px;
  height: 200px;
  background-color: #fff;
  margin: 0 10px;
  display: inline-table;
  border-radius: 5px;
  position: relative;
}

.CB .CB_Content .Products .Product .Product_Header,
.CB .CB_Content .Parts .Product .Product_Header,
.CB .CB_Content .Products .Part .Product_Header,
.CB .CB_Content .Parts .Part .Product_Header,
.CB .CB_Content .Products .Product .Part_Header,
.CB .CB_Content .Parts .Product .Part_Header,
.CB .CB_Content .Products .Part .Part_Header,
.CB .CB_Content .Parts .Part .Part_Header {
  background-color: #eaeaea;
  width: 100%;
  text-align: left;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.CB .CB_Content .Products .Product .Product_Header span,
.CB .CB_Content .Parts .Product .Product_Header span,
.CB .CB_Content .Products .Part .Product_Header span,
.CB .CB_Content .Parts .Part .Product_Header span,
.CB .CB_Content .Products .Product .Part_Header span,
.CB .CB_Content .Parts .Product .Part_Header span,
.CB .CB_Content .Products .Part .Part_Header span,
.CB .CB_Content .Parts .Part .Part_Header span {
  font-size: 16px;
}

.CB .CB_Content .Products .Product .Product_Header span a,
.CB .CB_Content .Parts .Product .Product_Header span a,
.CB .CB_Content .Products .Part .Product_Header span a,
.CB .CB_Content .Parts .Part .Product_Header span a,
.CB .CB_Content .Products .Product .Part_Header span a,
.CB .CB_Content .Parts .Product .Part_Header span a,
.CB .CB_Content .Products .Part .Part_Header span a,
.CB .CB_Content .Parts .Part .Part_Header span a {
  float: right;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Content,
.CB .CB_Content .Parts .Product .Product_Content,
.CB .CB_Content .Products .Part .Product_Content,
.CB .CB_Content .Parts .Part .Product_Content,
.CB .CB_Content .Products .Product .Part_Content,
.CB .CB_Content .Parts .Product .Part_Content,
.CB .CB_Content .Products .Part .Part_Content,
.CB .CB_Content .Parts .Part .Part_Content {
  text-align: left;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_Left,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_Left,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_Left,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_Left,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_Left,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_Left,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_Left,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_Left,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_Left,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_Left,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_Left,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_Left,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_Left,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_Left,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_Left,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_Left {
  width: 50%;
  min-height: 120px;
  float: left;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_Left a,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_Left a,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_Left a,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_Left a,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_Left a,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_Left a,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_Left a,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_Left a {
  display: block;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_right,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_right,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_right,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_right,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_right,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_right,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_right,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_right,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_right,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_right,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_right,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_right,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_right,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_right,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_right,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_right {
  width: 50%;
  min-height: 120px;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_right img,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_right img,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_right img,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_right img,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_right img,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_right img,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_right img,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_right img,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_right img,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_right img,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_right img,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_right img,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_right img,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_right img,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_right img,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_right img {
  width: 100%;
}

.CB .CB_Content .Products .Product .Product_Footer,
.CB .CB_Content .Parts .Product .Product_Footer,
.CB .CB_Content .Products .Part .Product_Footer,
.CB .CB_Content .Parts .Part .Product_Footer,
.CB .CB_Content .Products .Product .Part_Footer,
.CB .CB_Content .Parts .Product .Part_Footer,
.CB .CB_Content .Products .Part .Part_Footer,
.CB .CB_Content .Parts .Part .Part_Footer {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.CB .CB_Content .Products .Product .Product_Footer a,
.CB .CB_Content .Parts .Product .Product_Footer a,
.CB .CB_Content .Products .Part .Product_Footer a,
.CB .CB_Content .Parts .Part .Product_Footer a,
.CB .CB_Content .Products .Product .Part_Footer a,
.CB .CB_Content .Parts .Product .Part_Footer a,
.CB .CB_Content .Products .Part .Part_Footer a,
.CB .CB_Content .Parts .Part .Part_Footer a {
  width: 50%;
  height: 25px;
  border: 1px solid #dddddd;
  background-color: #eaeaea;
  border-radius: 5px;
  margin-bottom: 10px;
  line-height: 25px;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Footer button,
.CB .CB_Content .Parts .Product .Product_Footer button,
.CB .CB_Content .Products .Part .Product_Footer button,
.CB .CB_Content .Parts .Part .Product_Footer button,
.CB .CB_Content .Products .Product .Part_Footer button,
.CB .CB_Content .Parts .Product .Part_Footer button,
.CB .CB_Content .Products .Part .Part_Footer button,
.CB .CB_Content .Parts .Part .Part_Footer button {
  width: 50%;
  height: 25px;
  border: 1px solid #dddddd;
  background-color: #eaeaea;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 4px 6px;
  color: #000;
}

.CB .CB_Content .lineTop {
  height: 25px;
  width: calc(100% - 25%);
  border-top: 1px dotted #fff;
  border-right: 1px dotted #fff;
  border-left: 1px dotted #fff;
  margin: 0 110px;
  display: none;
}

.CB .CB_Content .lineTop.active {
  display: block;
}

.CB .CB_Content .lineTop.none {
  border-right: none;
  width: 1px;
  margin-top: -2px;
}

.CB .CB_Content .lineTop.two {
  width: calc(100% - 50%);
}

.CB .CB_Content .lineTop .LineTop_Line {
  width: 219px;
  height: 100%;
  border-right: 1px dotted #fff;
  float: left;
}

.CB .CB_Content .lineBottom {
  display: none;
  height: 25px;
  width: 100%;
}

.CB .CB_Content .lineBottom.active {
  display: block;
}

.CB .CB_Content .lineBottom .LineBottom_Line {
  width: 50%;
  height: 100%;
  border-right: 1px dotted #fff;
}

.CB .CB_Content .lineBottom .LineBottom_Line.Test {
  width: calc(50% - 300px);
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="CB">

  <div class="CB_Menu">
    header
  </div>

  <div class="CB_Content">

    <div class="Products">
      <div>
        <div class="Product">
          <div class="Product_Header">
            <span>Title<i class="fa fa-ellipsis-h"></i></span>
          </div>
          <div class="Product_Content">
            <div class="Product_Content_Left">
              Link 1
              Link 2
            </div>
            <div class="Product_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Product_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>
        <div class="lineBottom active">
          <div class="LineBottom_Line"></div>
        </div>
      </div>
    </div>
    <div class="Parts">
      <div>
        <div class="lineTop active">
          <div class="LineTop_Line"></div>
          <div class="LineTop_Line"></div>
        </div>
        <div>
          <div class="Part">
            <div class="Part_Header">
              <span>Title<i class="fa fa-ellipsis-h"></i></span>
            </div>
            <div class="Part_Content">
              <div class="Part_Content_Left">
                Link 1
                Link 2
              </div>
              <div class="Part_Content_right">
                <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
              </div>
            </div>
            <div class="Part_Footer">
              <button>Show <i class="fa fa-caret-down"></i></button>
            </div>
          </div>

          <div style="position:absolute; transform:translate(-33%)">
            <div class="lineBottom active">
              <div class="LineBottom_Line"></div>
            </div>

            <div class="sub_part">
              <div class="lineTop active">
                <div class="LineTop_Line"></div>
              </div>
              <div class="Parts">
                <div>
                  <div class="Part">
                    <div class="Part_Header">
                      <span>Title<i class="fa fa-ellipsis-h"></i></span>
                    </div>
                    <div class="Part_Content">
                      <div class="Part_Content_Left">
                        Link 1
                        Link 2
                      </div>
                      <div class="Part_Content_right">
                        <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                      </div>
                    </div>
                    <div class="Part_Footer">
                      <button>Show <i class="fa fa-caret-down"></i></button>
                    </div>
                  </div>
                  <div class="Part">
                    <div class="Part_Header">
                      <span>Title<i class="fa fa-ellipsis-h"></i></span>
                    </div>
                    <div class="Part_Content">
                      <div class="Part_Content_Left">
                        Link 1
                        Link 2
                      </div>
                      <div class="Part_Content_right">
                        <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                      </div>
                    </div>
                    <div class="Part_Footer">
                      <button>Show <i class="fa fa-caret-down"></i></button>
                    </div>
                  </div>
                  <div class="Part">
                    <div class="Part_Header">
                      <span>Title<i class="fa fa-ellipsis-h"></i></span>
                    </div>
                    <div class="Part_Content">
                      <div class="Part_Content_Left">
                        Link 1
                        Link 2
                      </div>
                      <div class="Part_Content_right">
                        <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                      </div>
                    </div>
                    <div class="Part_Footer">
                      <button>Show <i class="fa fa-caret-down"></i></button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="Part">
          <div class="Part_Header">
            <span>Title<i class="fa fa-ellipsis-h"></i></span>
          </div>
          <div class="Part_Content">
            <div class="Part_Content_Left">
              Link 1
              Link 2
            </div>
            <div class="Part_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Part_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>
        <div class="Part">
          <div class="Part_Header">
            <span>Title<i class="fa fa-ellipsis-h"></i></span>
          </div>
          <div class="Part_Content">
            <div class="Part_Content_Left">
              Link 1
              Link 2
            </div>
            <div class="Part_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Part_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>
        <div class="Part">
          <div class="Part_Header">
            <span>Title<i class="fa fa-ellipsis-h"></i></span>
          </div>
          <div class="Part_Content">
            <div class="Part_Content_Left">
              Link 1
              Link 2
            </div>
            <div class="Part_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Part_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>

      </div>
    </div>
  </div>
</div></code>```

Title: Keep div inside Container

Body:
I've the snippet below, and if you look into it then you can see that the lowest level of items is outside the container.

I know its because of the position:absolute; transform:translate(-33%).
But it's the only way so far i've been able to center the elements below the it's parrent.

Is the some way to "put" the 3 lowest elements into the container and make the whole thing scroll able from left to right?

body {
  background-color: #eaeaea;
  width: 2000px
}

.CB {
  background-color: #c4cfd8;
  width: 1200px;
  margin: 0 auto;
  margin-top: 50px;
  user-select: none;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 200vh;
}

.CB .CB_Menu {
  width: 100%;
  height: 35px;
  background-color: #fff;
  margin-bottom: 20px;
}

.CB .CB_Content .Products,
.CB .CB_Content .Parts {
  text-align: center;
}

.CB .CB_Content .Products > div,
.CB .CB_Content .Parts > div {
  display: inline-block;
}

.CB .CB_Content .Products > div > div,
.CB .CB_Content .Parts > div > div {
  display: inline-table;
}

.CB .CB_Content .Products .Product,
.CB .CB_Content .Parts .Product,
.CB .CB_Content .Products .Part,
.CB .CB_Content .Parts .Part {
  width: 200px;
  height: 200px;
  background-color: #fff;
  margin: 0 10px;
  display: inline-table;
  border-radius: 5px;
  position: relative;
}

.CB .CB_Content .Products .Product .Product_Header,
.CB .CB_Content .Parts .Product .Product_Header,
.CB .CB_Content .Products .Part .Product_Header,
.CB .CB_Content .Parts .Part .Product_Header,
.CB .CB_Content .Products .Product .Part_Header,
.CB .CB_Content .Parts .Product .Part_Header,
.CB .CB_Content .Products .Part .Part_Header,
.CB .CB_Content .Parts .Part .Part_Header {
  background-color: #eaeaea;
  width: 100%;
  text-align: left;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.CB .CB_Content .Products .Product .Product_Header span,
.CB .CB_Content .Parts .Product .Product_Header span,
.CB .CB_Content .Products .Part .Product_Header span,
.CB .CB_Content .Parts .Part .Product_Header span,
.CB .CB_Content .Products .Product .Part_Header span,
.CB .CB_Content .Parts .Product .Part_Header span,
.CB .CB_Content .Products .Part .Part_Header span,
.CB .CB_Content .Parts .Part .Part_Header span {
  font-size: 16px;
}

.CB .CB_Content .Products .Product .Product_Header span a,
.CB .CB_Content .Parts .Product .Product_Header span a,
.CB .CB_Content .Products .Part .Product_Header span a,
.CB .CB_Content .Parts .Part .Product_Header span a,
.CB .CB_Content .Products .Product .Part_Header span a,
.CB .CB_Content .Parts .Product .Part_Header span a,
.CB .CB_Content .Products .Part .Part_Header span a,
.CB .CB_Content .Parts .Part .Part_Header span a {
  float: right;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Content,
.CB .CB_Content .Parts .Product .Product_Content,
.CB .CB_Content .Products .Part .Product_Content,
.CB .CB_Content .Parts .Part .Product_Content,
.CB .CB_Content .Products .Product .Part_Content,
.CB .CB_Content .Parts .Product .Part_Content,
.CB .CB_Content .Products .Part .Part_Content,
.CB .CB_Content .Parts .Part .Part_Content {
  text-align: left;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_Left,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_Left,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_Left,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_Left,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_Left,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_Left,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_Left,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_Left,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_Left,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_Left,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_Left,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_Left,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_Left,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_Left,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_Left,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_Left {
  width: 50%;
  min-height: 120px;
  float: left;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_Left a,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_Left a,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_Left a,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_Left a,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_Left a,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_Left a,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_Left a,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_Left a {
  display: block;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_right,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_right,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_right,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_right,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_right,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_right,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_right,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_right,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_right,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_right,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_right,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_right,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_right,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_right,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_right,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_right {
  width: 50%;
  min-height: 120px;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_right img,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_right img,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_right img,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_right img,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_right img,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_right img,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_right img,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_right img,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_right img,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_right img,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_right img,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_right img,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_right img,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_right img,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_right img,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_right img {
  width: 100%;
}

.CB .CB_Content .Products .Product .Product_Footer,
.CB .CB_Content .Parts .Product .Product_Footer,
.CB .CB_Content .Products .Part .Product_Footer,
.CB .CB_Content .Parts .Part .Product_Footer,
.CB .CB_Content .Products .Product .Part_Footer,
.CB .CB_Content .Parts .Product .Part_Footer,
.CB .CB_Content .Products .Part .Part_Footer,
.CB .CB_Content .Parts .Part .Part_Footer {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.CB .CB_Content .Products .Product .Product_Footer a,
.CB .CB_Content .Parts .Product .Product_Footer a,
.CB .CB_Content .Products .Part .Product_Footer a,
.CB .CB_Content .Parts .Part .Product_Footer a,
.CB .CB_Content .Products .Product .Part_Footer a,
.CB .CB_Content .Parts .Product .Part_Footer a,
.CB .CB_Content .Products .Part .Part_Footer a,
.CB .CB_Content .Parts .Part .Part_Footer a {
  width: 50%;
  height: 25px;
  border: 1px solid #dddddd;
  background-color: #eaeaea;
  border-radius: 5px;
  margin-bottom: 10px;
  line-height: 25px;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Footer button,
.CB .CB_Content .Parts .Product .Product_Footer button,
.CB .CB_Content .Products .Part .Product_Footer button,
.CB .CB_Content .Parts .Part .Product_Footer button,
.CB .CB_Content .Products .Product .Part_Footer button,
.CB .CB_Content .Parts .Product .Part_Footer button,
.CB .CB_Content .Products .Part .Part_Footer button,
.CB .CB_Content .Parts .Part .Part_Footer button {
  width: 50%;
  height: 25px;
  border: 1px solid #dddddd;
  background-color: #eaeaea;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 4px 6px;
  color: #000;
}

.CB .CB_Content .lineTop {
  height: 25px;
  width: calc(100% - 25%);
  border-top: 1px dotted #fff;
  border-right: 1px dotted #fff;
  border-left: 1px dotted #fff;
  margin: 0 110px;
  display: none;
}

.CB .CB_Content .lineTop.active {
  display: block;
}

.CB .CB_Content .lineTop.none {
  border-right: none;
  width: 1px;
  margin-top: -2px;
}

.CB .CB_Content .lineTop.two {
  width: calc(100% - 50%);
}

.CB .CB_Content .lineTop .LineTop_Line {
  width: 219px;
  height: 100%;
  border-right: 1px dotted #fff;
  float: left;
}

.CB .CB_Content .lineBottom {
  display: none;
  height: 25px;
  width: 100%;
}

.CB .CB_Content .lineBottom.active {
  display: block;
}

.CB .CB_Content .lineBottom .LineBottom_Line {
  width: 50%;
  height: 100%;
  border-right: 1px dotted #fff;
}

.CB .CB_Content .lineBottom .LineBottom_Line.Test {
  width: calc(50% - 300px);
}

    header

            Title

              Link 1
              Link 2

            <button>Show </button>

              Title

                Link 1
                Link 2

              <button>Show </button>

                      Title

                        Link 1
                        Link 2

                      <button>Show </button>

                      Title

                        Link 1
                        Link 2

                      <button>Show </button>

                      Title

                        Link 1
                        Link 2

                      <button>Show </button>

            Title

              Link 1
              Link 2

            <button>Show </button>

            Title

              Link 1
              Link 2

            <button>Show </button>

            Title

              Link 1
              Link 2

            <button>Show </button>

Body:
Are you trying to achieve this?  Changes that you have to make:

Remove the fixed width of body i.e width:2000px.

Remove the fixed width of CB class i.e width:1200px.

You can set the width to auto or leave them be and they will expand horizontally as needed.

body {
  background-color: #eaeaea;
}

.CB {
  background-color: #c4cfd8;
  width: auto;
  margin: 0 auto;
  margin-top: 50px;
  user-select: none;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 200vh;
}

.CB .CB_Menu {
  width: 100%;
  height: 35px;
  background-color: #fff;
  margin-bottom: 20px;
}

.CB .CB_Content .Products,
.CB .CB_Content .Parts {
  text-align: center;
}

.CB .CB_Content .Products > div,
.CB .CB_Content .Parts > div {
  display: inline-block;
}

.CB .CB_Content .Products > div > div,
.CB .CB_Content .Parts > div > div {
  display: inline-table;
}

.CB .CB_Content .Products .Product,
.CB .CB_Content .Parts .Product,
.CB .CB_Content .Products .Part,
.CB .CB_Content .Parts .Part {
  width: 200px;
  height: 200px;
  background-color: #fff;
  margin: 0 10px;
  display: inline-table;
  border-radius: 5px;
  position: relative;
}

.CB .CB_Content .Products .Product .Product_Header,
.CB .CB_Content .Parts .Product .Product_Header,
.CB .CB_Content .Products .Part .Product_Header,
.CB .CB_Content .Parts .Part .Product_Header,
.CB .CB_Content .Products .Product .Part_Header,
.CB .CB_Content .Parts .Product .Part_Header,
.CB .CB_Content .Products .Part .Part_Header,
.CB .CB_Content .Parts .Part .Part_Header {
  background-color: #eaeaea;
  width: 100%;
  text-align: left;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.CB .CB_Content .Products .Product .Product_Header span,
.CB .CB_Content .Parts .Product .Product_Header span,
.CB .CB_Content .Products .Part .Product_Header span,
.CB .CB_Content .Parts .Part .Product_Header span,
.CB .CB_Content .Products .Product .Part_Header span,
.CB .CB_Content .Parts .Product .Part_Header span,
.CB .CB_Content .Products .Part .Part_Header span,
.CB .CB_Content .Parts .Part .Part_Header span {
  font-size: 16px;
}

.CB .CB_Content .Products .Product .Product_Header span a,
.CB .CB_Content .Parts .Product .Product_Header span a,
.CB .CB_Content .Products .Part .Product_Header span a,
.CB .CB_Content .Parts .Part .Product_Header span a,
.CB .CB_Content .Products .Product .Part_Header span a,
.CB .CB_Content .Parts .Product .Part_Header span a,
.CB .CB_Content .Products .Part .Part_Header span a,
.CB .CB_Content .Parts .Part .Part_Header span a {
  float: right;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Content,
.CB .CB_Content .Parts .Product .Product_Content,
.CB .CB_Content .Products .Part .Product_Content,
.CB .CB_Content .Parts .Part .Product_Content,
.CB .CB_Content .Products .Product .Part_Content,
.CB .CB_Content .Parts .Product .Part_Content,
.CB .CB_Content .Products .Part .Part_Content,
.CB .CB_Content .Parts .Part .Part_Content {
  text-align: left;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_Left,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_Left,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_Left,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_Left,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_Left,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_Left,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_Left,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_Left,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_Left,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_Left,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_Left,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_Left,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_Left,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_Left,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_Left,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_Left {
  width: 50%;
  min-height: 120px;
  float: left;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_Left a,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_Left a,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_Left a,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_Left a,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_Left a,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_Left a,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_Left a,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_Left a {
  display: block;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_right,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_right,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_right,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_right,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_right,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_right,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_right,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_right,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_right,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_right,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_right,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_right,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_right,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_right,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_right,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_right {
  width: 50%;
  min-height: 120px;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_right img,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_right img,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_right img,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_right img,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_right img,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_right img,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_right img,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_right img,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_right img,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_right img,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_right img,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_right img,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_right img,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_right img,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_right img,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_right img {
  width: 100%;
}

.CB .CB_Content .Products .Product .Product_Footer,
.CB .CB_Content .Parts .Product .Product_Footer,
.CB .CB_Content .Products .Part .Product_Footer,
.CB .CB_Content .Parts .Part .Product_Footer,
.CB .CB_Content .Products .Product .Part_Footer,
.CB .CB_Content .Parts .Product .Part_Footer,
.CB .CB_Content .Products .Part .Part_Footer,
.CB .CB_Content .Parts .Part .Part_Footer {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.CB .CB_Content .Products .Product .Product_Footer a,
.CB .CB_Content .Parts .Product .Product_Footer a,
.CB .CB_Content .Products .Part .Product_Footer a,
.CB .CB_Content .Parts .Part .Product_Footer a,
.CB .CB_Content .Products .Product .Part_Footer a,
.CB .CB_Content .Parts .Product .Part_Footer a,
.CB .CB_Content .Products .Part .Part_Footer a,
.CB .CB_Content .Parts .Part .Part_Footer a {
  width: 50%;
  height: 25px;
  border: 1px solid #dddddd;
  background-color: #eaeaea;
  border-radius: 5px;
  margin-bottom: 10px;
  line-height: 25px;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Footer button,
.CB .CB_Content .Parts .Product .Product_Footer button,
.CB .CB_Content .Products .Part .Product_Footer button,
.CB .CB_Content .Parts .Part .Product_Footer button,
.CB .CB_Content .Products .Product .Part_Footer button,
.CB .CB_Content .Parts .Product .Part_Footer button,
.CB .CB_Content .Products .Part .Part_Footer button,
.CB .CB_Content .Parts .Part .Part_Footer button {
  width: 50%;
  height: 25px;
  border: 1px solid #dddddd;
  background-color: #eaeaea;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 4px 6px;
  color: #000;
}

.CB .CB_Content .lineTop {
  height: 25px;
  width: calc(100% - 25%);
  border-top: 1px dotted #fff;
  border-right: 1px dotted #fff;
  border-left: 1px dotted #fff;
  margin: 0 110px;
  display: none;
}

.CB .CB_Content .lineTop.active {
  display: block;
}

.CB .CB_Content .lineTop.none {
  border-right: none;
  width: 1px;
  margin-top: -2px;
}

.CB .CB_Content .lineTop.two {
  width: calc(100% - 50%);
}

.CB .CB_Content .lineTop .LineTop_Line {
  width: 219px;
  height: 100%;
  border-right: 1px dotted #fff;
  float: left;
}

.CB .CB_Content .lineBottom {
  display: none;
  height: 25px;
  width: 100%;
}

.CB .CB_Content .lineBottom.active {
  display: block;
}

.CB .CB_Content .lineBottom .LineBottom_Line {
  width: 50%;
  height: 100%;
  border-right: 1px dotted #fff;
}

.CB .CB_Content .lineBottom .LineBottom_Line.Test {
  width: calc(50% - 300px);
}

<div class="CB">

  <div class="CB_Menu">
    header
  </div>

  <div class="CB_Content">

    <div class="Products">
      <div>
        <div class="Product">
          <div class="Product_Header">
            <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
          </div>
          <div class="Product_Content">
            <div class="Product_Content_Left">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
            </div>
            <div class="Product_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Product_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>
        <div class="lineBottom active">
          <div class="LineBottom_Line"></div>
        </div>
      </div>
    </div>
    <div class="Parts">
      <div>
        <div class="lineTop active">
          <div class="LineTop_Line"></div>
          <div class="LineTop_Line"></div>
        </div>
        <div>
          <div class="Part">
            <div class="Part_Header">
              <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
            </div>
            <div class="Part_Content">
              <div class="Part_Content_Left">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
              </div>
              <div class="Part_Content_right">
                <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
              </div>
            </div>
            <div class="Part_Footer">
              <button>Show <i class="fa fa-caret-down"></i></button>
            </div>
          </div>

          <div style="position:absolute; transform:translate(-33%)">
            <div class="lineBottom active">
              <div class="LineBottom_Line"></div>
            </div>

            <div class="sub_part">
              <div class="lineTop active">
                <div class="LineTop_Line"></div>
              </div>
              <div class="Parts">
                <div>
                  <div class="Part">
                    <div class="Part_Header">
                      <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
                    </div>
                    <div class="Part_Content">
                      <div class="Part_Content_Left">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                      </div>
                      <div class="Part_Content_right">
                        <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                      </div>
                    </div>
                    <div class="Part_Footer">
                      <button>Show <i class="fa fa-caret-down"></i></button>
                    </div>
                  </div>
                  <div class="Part">
                    <div class="Part_Header">
                      <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
                    </div>
                    <div class="Part_Content">
                      <div class="Part_Content_Left">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                      </div>
                      <div class="Part_Content_right">
                        <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                      </div>
                    </div>
                    <div class="Part_Footer">
                      <button>Show <i class="fa fa-caret-down"></i></button>
                    </div>
                  </div>
                  <div class="Part">
                    <div class="Part_Header">
                      <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
                    </div>
                    <div class="Part_Content">
                      <div class="Part_Content_Left">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                      </div>
                      <div class="Part_Content_right">
                        <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                      </div>
                    </div>
                    <div class="Part_Footer">
                      <button>Show <i class="fa fa-caret-down"></i></button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="Part">
          <div class="Part_Header">
            <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
          </div>
          <div class="Part_Content">
            <div class="Part_Content_Left">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
            </div>
            <div class="Part_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Part_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>
        <div class="Part">
          <div class="Part_Header">
            <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
          </div>
          <div class="Part_Content">
            <div class="Part_Content_Left">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
            </div>
            <div class="Part_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Part_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>
        <div class="Part">
          <div class="Part_Header">
            <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
          </div>
          <div class="Part_Content">
            <div class="Part_Content_Left">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
            </div>
            <div class="Part_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Part_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>


问:
What does "asp.net" mean?
I know asp stands for Active Server Pages but wondering if "Active Server" means anything actually? </p>

答: ASP.NET pages aren't static; they have executable, server-side code behind them that may dynamically generate page content or interact with the serving system—they're active (web) server pages.

OwnerDisplayName: Sesh

ContentLicense: CC BY-SA 2.5

Title: What does "asp.net" mean?

OwnerDisplayName: Chris

LastEditorDisplayName: Chris


问:
Wrapping -- don't break up paragraphs
I have a pretty standard page layout where there's an image floated to the left, and then some information to the right of it, that consists of 1 line headers (bold) and 1 line of data underneath each header.

I want the data to flow around the image, but is there any way I can stop the data from breaking from the header that goes with it when it wraps? I.E. only wrap between a line of data and the next header.

Seems simple, but I haven't been able to come up with a way to do it!

Edit: here is a jsfiddle to illustrate my situation (cool site!): http://www.jsfiddle.net/qYcX5/
See the last paragraph is broken apart from its header.

BTW, on the actual page I'm building, the length of paragraphs on the right and the # of items will vary, so I can't arbitrarily decide to clear the data at a certain point and always have it look right.

答:
I think you will need to pop a containing div around the heading and following paragraph, then float this div container.</p>

```<code><img />
<div>
  <h1>title</h1>
  <p>text</p>
</div>
</code>```

Title: Wrapping -- don't break up paragraphs

Body:
I think you will need to pop a containing div around the heading and following paragraph, then float this div container.

<img />
<div>
  <h1>title</h1>
  <p>text</p>
</div>


问:
Custom view from NSWindowController Cocoa
I have an application with two windows, the main window opens the second window that is a NSWindowController and in its xib file there is a custom view, is there any way to draw in this custom view from NSWindowController?

thanks

答:
solved, I have declared two IBOutlets, one on NSView:

```<code>IBOutlet MyNSWindowController *wc;
</code>```

and one on NSWindowController:

```<code>IBOutlet MyNSView *view;
</code>```

then, I have to connected them to custom view.

Now I can to use its methods simply calling its IBOutlets.

Body:
solved, I have declared two IBOutlets, one on NSView:

IBOutlet MyNSWindowController *wc;

and one on NSWindowController:

IBOutlet MyNSView *view;

then, I have to connected them to custom view.

Now I can to use its methods simply calling its IBOutlets.


问:
Wordpress Create Custom Post on New User Register

In Wordpress I'm Trying to Create Custom Post on New User Register of specific user role "author"

For This I try to figure out this Code in Function.php

```<code>add_action( 'user_register', 'wpse_216921_company_cpt', 10, 1 );

function wpse_216921_company_cpt( $user_id )
{
    // Get user info
    $user_info = get_userdata( $user_id );
    $user_roles=$user_info->roles;

 if ($user_roles == 'author') {
    // Create a new post
    $user_post = array(
        'post_title'   => $user_info->nickname,
        'post_type'    => 'CustomPost', // <- change to your cpt
    );
    // Insert the post into the database
    $post_id = wp_insert_post( $user_post );

 }

}
</code>```

But Not Success. After I add above code no error working fine but it not triggering automatic and not creating new custom post

I simple want that whenever I add new Author / New Author Register it create one Custom Post with title as same as username. and publish it

答:
The role your are checking with is not correct, $user_info->roles returns an array, not a string. Find the modified code below,

```<code>add_action( 'user_register', 'wpse_216921_company_cpt', 10, 1 );

function wpse_216921_company_cpt( $user_id )
{
    // Get user info
    $user_info = get_userdata( $user_id );
    $user_roles = $user_info->roles;

    // New code added
    $this_user_role = implode(', ', $user_roles );

    if ($this_user_role == 'author') {

        // Create a new post
        $user_post = array(
            'post_title'   => $user_info->nickname,
            'post_status'  => 'publish', // <- here is to publish
            'post_type'    => 'CustomPost', // <- change to your cpt
        );
        // Insert the post into the database
        $post_id = wp_insert_post( $user_post );
    }
}
</code>```

Hope this helps.

Body:
In Wordpress I'm Trying to Create Custom Post on New User Register of specific user role "author"

For This I try to figure out this Code in Function.php

add_action( 'user_register', 'wpse_216921_company_cpt', 10, 1 );

function wpse_216921_company_cpt( $user_id )
{
    // Get user info
    $user_info = get_userdata( $user_id );
    $user_roles=$user_info->roles;

 if ($user_roles == 'author') {
    // Create a new post
    $user_post = array(
        'post_title'   => $user_info->nickname,
        'post_type'    => 'CustomPost', // <- change to your cpt
    );
    // Insert the post into the database
    $post_id = wp_insert_post( $user_post );

 }

}

But Not Success. After I add above code no error working fine but it not triggering automatic and not creating new custom post

I simple want that whenever I add new Author / New Author Register it create one Custom Post with title as same as username. and publish it

Body:
The role your are checking with is not correct, $user_info->roles returns an array, not a string. Find the modified code below,

add_action( 'user_register', 'wpse_216921_company_cpt', 10, 1 );

function wpse_216921_company_cpt( $user_id )
{
    // Get user info
    $user_info = get_userdata( $user_id );
    $user_roles = $user_info->roles;

    // New code added
    $this_user_role = implode(', ', $user_roles );

    if ($this_user_role == 'author') {

        // Create a new post
        $user_post = array(
            'post_title'   => $user_info->nickname,
            'post_status'  => 'publish', // <- here is to publish
            'post_type'    => 'CustomPost', // <- change to your cpt
        );
        // Insert the post into the database
        $post_id = wp_insert_post( $user_post );
    }
}

Hope this helps.


问:
Black background with light color gradient on top of it in semi-circle shape
Gradient should be very light on black background
I am trying to get a semi-circle with black background and light blue gradient on top of it (which is visible like a glow or shadow). I have tried many ways using  tags in Android but not able to get exactly what i need. Can someone please help in achieving this.

Thanks in advance.

答:
You can get a circular gradient using android:type="radial":

```<code><shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:type="radial" android:gradientRadius="250"
        android:startColor="your start color" android:endColor="your end color" />
</shape>
</code>```

for semi circle you can use this code

```<code>public class SemiCircleDrawable extends Drawable {

    private Paint paint;
    private RectF rectF;
    private int color;
    private Direction angle;

    public enum Direction
    {
        LEFT,
        RIGHT,
        TOP,
        BOTTOM
    }

    public SemiCircleDrawable() {
        this(Color.BLUE, Direction.LEFT);
    }

    public SemiCircleDrawable(int color, Direction angle) {
        this.color = color;
        this.angle = angle;
        paint = new Paint();
        paint.setColor(color);
        paint.setStyle(Style.FILL);
        rectF = new RectF();
    }

    public int getColor() {
        return color;
    }

    /**
     * A 32bit color not a color resources.
     * @param color
     */
    public void setColor(int color) {
        this.color = color;
        paint.setColor(color);
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.save();

        Rect bounds = getBounds();

        if(angle == Direction.LEFT || angle == Direction.RIGHT)
        {
            canvas.scale(2, 1);
            if(angle == Direction.RIGHT)
            {
                canvas.translate(-(bounds.right / 2), 0);
            }
        }
        else
        {
            canvas.scale(1, 2);
            if(angle == Direction.BOTTOM)
            {
                canvas.translate(0, -(bounds.bottom / 2));
            }
        }

        rectF.set(bounds);

        if(angle == Direction.LEFT)
            canvas.drawArc(rectF, 90, 180, true, paint);
        else if(angle == Direction.TOP)
            canvas.drawArc(rectF, -180, 180, true, paint);
        else if(angle == Direction.RIGHT)
            canvas.drawArc(rectF, 270, 180, true, paint);
        else if(angle == Direction.BOTTOM)
            canvas.drawArc(rectF, 0, 180, true, paint);
    }

    @Override
    public void setAlpha(int alpha) {
        // Has no effect
    }

    @Override
    public void setColorFilter(ColorFilter cf) {
        // Has no effect
    }

    @Override
    public int getOpacity() {
        // Not Implemented
        return 0;
    }

}
</code>```

Body:
You can get a circular gradient using android:type="radial":

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:type="radial" android:gradientRadius="250"
        android:startColor="your start color" android:endColor="your end color" />
</shape>

for semi circle you can use this code

public class SemiCircleDrawable extends Drawable {

    private Paint paint;
    private RectF rectF;
    private int color;
    private Direction angle;

    public enum Direction
    {
        LEFT,
        RIGHT,
        TOP,
        BOTTOM
    }

    public SemiCircleDrawable() {
        this(Color.BLUE, Direction.LEFT);
    }

    public SemiCircleDrawable(int color, Direction angle) {
        this.color = color;
        this.angle = angle;
        paint = new Paint();
        paint.setColor(color);
        paint.setStyle(Style.FILL);
        rectF = new RectF();
    }

    public int getColor() {
        return color;
    }

    /**
     * A 32bit color not a color resources.
     * @param color
     */
    public void setColor(int color) {
        this.color = color;
        paint.setColor(color);
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.save();

        Rect bounds = getBounds();

        if(angle == Direction.LEFT || angle == Direction.RIGHT)
        {
            canvas.scale(2, 1);
            if(angle == Direction.RIGHT)
            {
                canvas.translate(-(bounds.right / 2), 0);
            }
        }
        else
        {
            canvas.scale(1, 2);
            if(angle == Direction.BOTTOM)
            {
                canvas.translate(0, -(bounds.bottom / 2));
            }
        }

        rectF.set(bounds);

        if(angle == Direction.LEFT)
            canvas.drawArc(rectF, 90, 180, true, paint);
        else if(angle == Direction.TOP)
            canvas.drawArc(rectF, -180, 180, true, paint);
        else if(angle == Direction.RIGHT)
            canvas.drawArc(rectF, 270, 180, true, paint);
        else if(angle == Direction.BOTTOM)
            canvas.drawArc(rectF, 0, 180, true, paint);
    }

    @Override
    public void setAlpha(int alpha) {
        // Has no effect
    }

    @Override
    public void setColorFilter(ColorFilter cf) {
        // Has no effect
    }

    @Override
    public int getOpacity() {
        // Not Implemented
        return 0;
    }

}


问:
Leaflet customcontrol - Angular 2+
I need to integrate a custom form control in my Angular2+ component:

```<code>export class HeatMapComponent {
...
  onMapReady(map: L.Map) {
    let div = L.DomUtil.create('div', 'info');
    let info = new L.Control();
    info.onAdd = () => {
      return div;
    };
    info.addTo(map);
  }
}
</code>```

And the .hmtl file like this:

```<code>    <div class="map container-fluid"
     leaflet [leafletOptions]="options"
     [leafletLayersControl]="layersControl"
     (leafletMapReady)="onMapReady($event)">
</div>
</code>```

The .css:

```<code>...

    .info {
      padding: 2rem 1rem;
      margin-left: 70rem;
      margin-right: 15rem;
      font: 1rem/1.5rem Arial, Helvetica, sans-serif;
      background: white;
      background: rgba(255,255,255,0.8);
      box-shadow: 0 0 15px rgba(0,0,0,0.2);
      border-radius: 5px;
    }
</code>```

In the leaflet documentation it's written in JS like this:

```<code>var info = L.control();info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
        '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
        : 'Hover over a state');
};

info.addTo(map);
</code>```

Why can't I integrate the addTo method in my onMapReady? I don't get any errors but nothing is displayed on my map.

答:
i solved this problem the solution is: </p>

```<code>onMapReady(map: leaflet.Map) {
let div = leaflet.DomUtil.create('div', 'infoControl');
let info = new leaflet.Control(); info.onAdd = () => {
return div;
   };
console.log(div);
info.addTo(map);
}
</code>```

ContentLicense: CC BY-SA 4.0

Title: Leaflet customcontrol - Angular 2+

Body:
I need to integrate a custom form control in my Angular2+ component:

export class HeatMapComponent {
...
  onMapReady(map: L.Map) {
    let div = L.DomUtil.create('div', 'info');
    let info = new L.Control();
    info.onAdd = () => {
      return div;
    };
    info.addTo(map);
  }
}

And the .hmtl file like this:

The .css:

...

    .info {
      padding: 2rem 1rem;
      margin-left: 70rem;
      margin-right: 15rem;
      font: 1rem/1.5rem Arial, Helvetica, sans-serif;
      background: white;
      background: rgba(255,255,255,0.8);
      box-shadow: 0 0 15px rgba(0,0,0,0.2);
      border-radius: 5px;
    }

In the leaflet documentation it's written in JS like this:

var info = L.control();info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '
US Population Density
' +  (props ?
        '' + props.name + '
' + props.density + ' people / mi2'
        : 'Hover over a state');
};

info.addTo(map);

Why can't I integrate the addTo method in my onMapReady? I don't get any errors but nothing is displayed on my map.

Body:
i solved this problem the solution is:

onMapReady(map: leaflet.Map) {
let div = leaflet.DomUtil.create('div', 'infoControl');
let info = new leaflet.Control(); info.onAdd = () => {
return div;
   };
console.log(div);
info.addTo(map);
}